Jump to content
Sign in to follow this  
Tobberoth

CSS layout not working :/

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.

Share this post


Link to post
Share on other sites

If you give us a sample of the code to work with, that would help... :)

Share this post


Link to post
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.

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

Not very possible... Unless you put your 4 divs inside another div (with 0 padding) that has the same color as your margin menus.EDIT: I didn't get to see your example as I was trying stuff, still, this does kinda apply.

Share this post


Link to post
Share on other sites
Not very possible... Unless you put your 4 divs inside another div (with 0 padding) that has the same color as your margin menus.EDIT: I didn't get to see your example as I was trying stuff, still, this does kinda apply.

Hey man.. That's actually a very good idea... I'll try that, that might be just what I need O.o

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...