Jump to content

div with 3 columns


computer
 Share

Recommended Posts

Hi fellas, am trying to create a div element with three columns. the first two give me no problems, but when I insert the third column, its content is displaced and not in line with the rest. In my code below, I have commented the div.right both in the css and the html, which is causing the problem. please look at the code, then remove the comments to see how my div appears. then help me align this third column to be in line with the first two. thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml1"> <head> <title>top navigation bar</title> <style type="text/css"> div#header { position:relative; width:70%; margin-bottom:2px; border: 1px solid gray; line-height: 150%; margin-left:16.5%; margin-right:auto; } div.header { padding:0.1em; color:white; background-color: gray; clear:left; } div.footer { padding:0.1em; color:white; background-color:#333333; clear:left; } h1.header { padding:0; margin: 0; } div.left { float:left; width: 250px; margin: 0; padding: 1em; } div.content { margin-left:270px; border-left: 1px solid gray; padding: 1em; width: 190px; border-right: 1px solid gray; }/*div.right { margin-left:495px; width:auto; padding: 1em; border-left: 1px solid gray; }*/ </style></head> <body> <div id="header"> <div class="header"><h1 class="header">tickertape</h1></div> <div class="left">The logo comes here</div> <div class="content">phone numbers come here</div> <!-- <div class="right">customer care image here</div> --> <div class="footer">the menu items</div> </div> </body></html>

Link to comment
Share on other sites

as the long as the sum of the three columns widths do not exceed their container, (or just don't give the parent a width) why not just try floating all the columns? (left or right, don't think it would matter)

Link to comment
Share on other sites

Follow thescientist's advice and float them all (I floated them left) and then remove those huge margins as well.FWIW, you might want to consider switching to a Strict DTD too, as long as this page seems to be in its infancy. And validate your code as you work. If you follow these two guidelines you'll produce a much more cross-browser compatible website.EDIT: Oh, and try this for centering your header div:div#header{width:70%;margin-bottom:2px;border: 1px solid gray;line-height: 150%;margin: 0px auto;}Notice: I also took out the position: relative as it doesn't appear to be necessary. Feel free to keep it if you do need it.

Edited by ShadowMage
Link to comment
Share on other sites

the position relative is so because the div is placed below another div on my page.Am quite new to css, and I just want to know how I can validate my code. What's the procedure or where can I get the tutorials?And frankly I do not know the difference or consequences of using the Transitional or Strict DTD. I just use Transitional coz, that's what the W3schools code uses.I hope that's not too much to ask.Thanks in advance.

Link to comment
Share on other sites

the position relative is so because the div is placed below another div on my page.Am quite new to css, and I just want to know how I can validate my code. What's the procedure or where can I get the tutorials?
ummm...the parent website of this forum? as for validation, there's the w3c's validator. validator.w3.org (or see my sig)
And frankly I do not know the difference or consequences of using the Transitional or Strict DTD. I just use Transitional coz, that's what the W3schools code uses.I hope that's not too much to ask.Thanks in advance.
a tough one to defend, but probably because this site was created waaaay back in the day. read this thread, and some of the other posts by the same OP; we've had a long running discussion about DTD's this weekhttp://w3schools.invisionzone.com/index.ph...=0&p=183309 Edited by thescientist
Link to comment
Share on other sites

also, the BTF reference was only because we have similar names. Probably could have come up with something better, in all honesty. :)

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...