Jump to content

Why Doesn't This Background Element Fill In All The Way


Guest Jerryt
 Share

Recommended Posts

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

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

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,Jerry
1) 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

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