Jump to content
Killersites Forums

How to control the heights of elements?


Recommended Posts

Lets say I have a wrapper with a background colour of black;

 

#wrapper {
text-align: left;
width: 981px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
background-color: #000;
}

 

And lets say within that wrapper I have the following elements which make up a two column layout;

 

#main {
background-color: #FFF;
float: left;
width: 640px;
margin-top: 10px;
margin-bottom: 15px;
margin-left: 10px;
border: 1px solid #000;
}

 

 

#rcol {
background-color: #FFF;
float: right;
width: 307px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
padding-top: 10px;
border: 1px solid #000;	

 

 

Both elements will expand in height depending on how much content is contained inside. However if I have more content in one or the other, there will be a height difference between the two elements and the colour of the wrapper will show through at the bottom of one of them.

 

What are the ways to get around this design problem?

Link to post
Share on other sites

A frequently asked question, but quite difficult to deal with if you have fluid width columns.

 

However, you have a fixed width #wrapper with two floated divs inside, so the easiest method is "faux-columns" which means creating an image for the wrapper width x say 5px high with the two colors of the columns (and any borders between them if you want) and using repeat-y to repeat that background-image down behind the two columns. See

http://www.wickham43.net/firefoxbackground.php#faux-columns

 

Item 19 is another solution for fixed width columns.

 

Items 16 to 19 on the same link show other solutions, some are for fluid width columns.

Edited by Wickham
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.
Note: Your post will require moderator approval before it will be visible.

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...
×
×
  • Create New...