Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problems with CSS and <DIV>

Status
Not open for further replies.
Vorgen

Vorgen

Programmer
Jan 25, 2005
2
GB
Hi,

This is my first post here.

I am having a puzzling problem with creating <div> boxes inline using CSS.

What I am wanting to do is have 3 boxes on the top row, with one spanning the full length below (as in colspan=3 in talbes)

I can do this as long as the width of the three boxes on the top row do not add up to 100%. As soon as this happens, the third box drops to the second row.

This is the code I am using :

<div style="{border:1px solid; width:50%; padding:0px; margin:0px;}">
<div style="{border:0px; background:#eee; width:50%; display: inline;}">title</div>
<div style="{border:0px; background:#ccc; width:25%; display: inline;}">show/hide</div>
<div style="{border:0px; background:#eee; width:24.5%; display: inline;}">date</div>
<div style="{border:0px; background:#eee; width:100%%; display: block;}">content</div>
</div>

Anything below 100% (even 99.5% as in the above code) works fine. Unfortunately there is a small amount of white-space at the right of the containing block if it is less than 100%.

Has anyone else come across this problem? I hope I am making myself clear.


 
Sort by date Sort by votes

Have you got a valid DOCTYPE at the top of your page? Some browsers display the border inside the box width, some outside, depending on the DOCTYPE... Which could mean your boxes go wider than 100% of the page width.

I also note you have "width:100%%" (with two % signs, erroneously).

Hope this helps,
Dan

 
Upvote 0 Downvote
Thanks, missed that %% thing, but it was doing that before I added the second row.

the doctype I am using (from w3c.org) is :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
I previously had :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

The third box is still dropping to the next row, but I have set the accumulative size of the three boxes to 99.9% and that seems to have prevented the little bit of extra space to the right.

I'll keep fiddling and hopefully stumble onto something, it is not critical at the moment, just a little annoying.

Thanks for your help

Vaughan
 
Upvote 0 Downvote
Main issue: Inline elements cannot have width specified. If you want to put three boxes in one row with a specified width, you need to float them and make the bottom box clear the float. Width floating, make sure there is enough space to fit the boxes (take into account width, margins, borders and padding).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
771
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
820
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
643
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top