Jump to content

CSS layout not working :/


Tobberoth
 Share

Recommended Posts

I am, like many others, trying to move from html to xhtml and CSS insted of tables etc. I'm working on a design with some divs. A header, a content area with margins containing links to the left and right, and a footer with copyright information.The problem is, the divs for the margins are only as big as the data inside them, I want them to be just as high as the content area, otherwise there will be white spaces if I color the margins. I can't define hight for the margins as I don't know how big the content area will be, it will probably vary from page to page.I'm pretty bad at this, help me.

Link to comment
Share on other sites

I dont really "clearly" understand what the problem is, but try adding a min-height property to the two divs beside the content area.

That is only a temporary solution and won't work if the content area is smaller than the min.height...Isn't there anyway to use the content divs height as the value for the margins, or am I too used to java programing and variables? I'll hook you guys up with a code so you can see.
Link to comment
Share on other sites

Here's the code: I want the whole margin to be brown (for the example) and I don't want the brown area to go over the border of the content area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Test</title><style type="text/css">div.container{width:100%;margin:0px;border:1px solid gray;line-height:150%;}div.header,div.footer{padding:0.5em;color:white;background-color:gray;clear:left;}h1.header{padding:0;margin:0;}div.left{float:left;width:160px;margin:0;padding:1em;background-color:#732;}div.content{margin-left:190px;border-left:1px solid gray;padding:1em;}</style></head><body><div class="container"><div class="header"><h1 class="header">Random Title</h1></div><div class="left"><p>The area with problems! I want this whole area to be the color I decide.</p></div><div class="content"><h2>Credits to W3Schools for this code</h2><p>Bla bla bla, this is the content area BTW</p><p>This text is to make the area big enough to display the problem.</p><p>bla bla</p><p> blablablablabla</p><p>Blablabla</p><p>baslbalbal</p><p>Blablabla</p><p>Blablabla</p></div><div class="footer">Something</div></div></body></html>

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...