Tobberoth Posted October 14, 2005 Share Posted October 14, 2005 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 More sharing options...
Jonas Posted October 14, 2005 Share Posted October 14, 2005 If you give us a sample of the code to work with, that would help... Link to comment Share on other sites More sharing options...
louie Posted October 14, 2005 Share Posted October 14, 2005 I dont really "clearly" understand what the problem is, but try adding a min-height property to the two divs beside the content area. Link to comment Share on other sites More sharing options...
Tobberoth Posted October 14, 2005 Author Share Posted October 14, 2005 I dont really "clearly" understand what the problem is, but try adding a min-height property to the two divs beside the content area.<{POST_SNAPBACK}> 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 More sharing options...
Tobberoth Posted October 14, 2005 Author Share Posted October 14, 2005 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 More sharing options...
F-Man Posted October 14, 2005 Share Posted October 14, 2005 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. Link to comment Share on other sites More sharing options...
Tobberoth Posted October 14, 2005 Author Share Posted October 14, 2005 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.<{POST_SNAPBACK}> Hey man.. That's actually a very good idea... I'll try that, that might be just what I need O.o Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now