7 Replies - 1177 Views - Last Post: 15 April 2012 - 11:01 AM

#1 Zooms  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 78
  • Joined: 04-December 08

[Easy] CSS boxes over/under-lapping?

Posted 31 March 2012 - 09:03 AM

Hello there!

I'm an almost complete CSS/HTML beginner, and I've run into a problem.

I have a few CSS boxes, one row of buttons, and one box that contains, well, content!
Now, the content box seems to be, underlapping the boxes for some reason. I've counted all
my height percentages, and they should match up (100%), but since the boxes overlap, all my measurements
are screwed up.

Here's a picture, so you'll understand what I mean. The grey row is the buttons (which are aligned by float:left, and
the yellow bit below is the content box)

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: [Easy] CSS boxes over/under-lapping?

#2 xxxjj18  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Re: [Easy] CSS boxes over/under-lapping?

Posted 31 March 2012 - 01:19 PM

The content box is underlapping the boxes to the left ( the red ) ?

Also, may I see the actual code for this so that I can test it out in my browser
Was This Post Helpful? 0
  • +
  • -

#3 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 239
  • Joined: 22-November 10

Re: [Easy] CSS boxes over/under-lapping?

Posted 31 March 2012 - 02:30 PM

Quote

I've counted all
my height percentages, and they should match up (100%), but since the boxes overlap, all my measurements.


Do you have any borders or padding on these items?
Was This Post Helpful? 0
  • +
  • -

#4 Zooms  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 78
  • Joined: 04-December 08

Re: [Easy] CSS boxes over/under-lapping?

Posted 10 April 2012 - 09:04 AM

Thanks for your posts, I asked my web design teacher though and she told me to add Overflow:true;
which seems to have sorted out the issue!
Was This Post Helpful? 0
  • +
  • -

#5 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: [Easy] CSS boxes over/under-lapping?

Posted 10 April 2012 - 09:30 AM

Overflow:true ?

True isn't a valid value for Overflow.

visible, hidden, scroll, auto and inherit are valid values.
Was This Post Helpful? 1
  • +
  • -

#6 xxxjj18  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Re: [Easy] CSS boxes over/under-lapping?

Posted 10 April 2012 - 05:40 PM

Lol I'd advise you NOT to take any more advice from your teacher... You can tell her I said that personally :)

Haha but seriously, that's pretty bad.. I would recommend you introduce her to these nice little tutorials here :)
Was This Post Helpful? 0
  • +
  • -

#7 Zooms  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 78
  • Joined: 04-December 08

Re: [Easy] CSS boxes over/under-lapping?

Posted 15 April 2012 - 08:20 AM

Ehe, my bad, my bad. I mean Overflow:auto;
But, regarding the Overflow bit, is it bad to use it, or was that just pointed towards my writing mistake? :oops:
Was This Post Helpful? 0
  • +
  • -

#8 xxxjj18  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Re: [Easy] CSS boxes over/under-lapping?

Posted 15 April 2012 - 11:01 AM

Overflow isn't bad to use; it's made explicitly for controlling extra content that exceeds its parent element's bounds.

The only problem with what you posted was giving the Overflow property the value "true"; which isn't valid.

The different properties do different things as such:

hidden: Any content that exceeds its parent element's width or height will not be displayed.

auto: Any content that exceeds its parent element's width or height will be scrollable.

scroll: Any content within the parent element will automatically have scrollbars, though they will be disabled until needed

visible: Any content that exceeds its parent element's width or height will be rendered outside of the element; aka it will keep extending past the element's bounds

I hope this helps with your understanding of the Overflow property :)

Edit:

So yes, the only problem was your writing mistake lol

This post has been edited by xxxjj18: 15 April 2012 - 11:04 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1