Guest Jerryt Posted November 5, 2009 Share Posted November 5, 2009 Below is an example from this website. I am trying to fill the whole left panel with a background color, but I get some weird results.To see what I mean, go to this example:http://www.w3schools.com/css/tryit.asp?fil...e=trycss_float6Add this element to the div.leftbackground: #00CC00;Add this element to div.contentbackground: #3366CC;Click the "Edit and Click Me" button.The 'header', 'footer', and 'content' have their entire panels filled in with thier background color. But the 'left' panel only has the green surrounding the text in the left panel.How do I make the left panel background color fill the entire panel?Thanks,Jerry Link to comment Share on other sites More sharing options...
Ingolme Posted November 5, 2009 Share Posted November 5, 2009 A <div> element occupies as much vertical space as the content within it, and including the padding and border.There are several ways you can fill the left side completely. One of them is to have the right panel inside the left panel. Another idea would be to have both panels inside a box which uses a background image that has both background colors. Link to comment Share on other sites More sharing options...
jeffman Posted November 5, 2009 Share Posted November 5, 2009 - Link to comment Share on other sites More sharing options...
nigel.collier@virgin.net Posted November 6, 2009 Share Posted November 6, 2009 Below is an example from this website. I am trying to fill the whole left panel with a background color, but I get some weird results.How do I make the left panel background color fill the entire panel?Thanks,Jerry1) The width of the div.left is set to 130px, but the position of the div.content is 190px from the left side of the div.container leaving a gap of 30px which is not filled in by either background-color. Try changing the div.left width to 190px and see what happens.2) By switching the width of the div.left you can see that sometimes the left panel is longer than the content panel and sometime vice-versa. This shows that the height of each panel is calculated from its set width and the amount of content. If you want the panels to be the same height you can simply set the height of each one specifically to be the same e.g. 400px;3) Option 2) is simple but not that clever as in many situations you don't want to specify a particular height. There are couple of ways to solve it without specifying a particular height. One is to use a repeating background image and the other one uses involves spliting the text into one div and the background color into the otherseeEd Eliot - Equal height columnsandJames Taylor - Equal Height columns Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.