[RESOLVED] Please Urgent!: help with floats

[lmartinLMV]

I need to create a layout like this:

<div id="wrapper" class="clearfix">
<div id="wrapper-left">
</div>
<div id="wrapper-center">
<!-- content -->
</div>
<div id="wrapper-right">
</div>
</div>

The sole purpose of #wrapper-left and #wrapper-right is to show a background image on the sides of the content, that is, there is no real content within them.

This is what I've made with CSS:

#wrapper {
width:1048px;
margin: 0 auto;
}

#wrapper-left {
float:left;
width:44px;
height:100%;
background:url(../images/header_r1_c2.jpg) top right no-repeat;
}

#wrapper-center {
float:left;
width:960px;
}

#wrapper-right {
float:left;
width:44px;
height:100%;
background:url(../images/header_r1_c4.gif) top left no-repeat;
}

Well, the problem is that I cannot get that the left and right blocks fill the room I assigned them so that their backgrounds are correctly displayed. They act as if they had no room assigned. What can I do then?

[josephbm91]

You're setting it to a height of 100%, but 100% of what? You've given no literal value to take the percentage of.

The moment you put a literal value in for your heights you'll see something.



#wrapper {
width:1048px;
margin: 0 auto;
}

#wrapper-left {
float:left;
width:44px;
height:100px;
background: #000000 url(../images/header_r1_c2.jpg) top right no-repeat;
}

#wrapper-center {
float:left;
width:960px;
}

#wrapper-right {
float:left;
width:44px;
height:100px;
background: #FF0000 url(../images/header_r1_c4.gif) top left no-repeat;
}

[lmartinLMV]

Thanks a lot! I'll take it into account from now on.

Been researching a bit more meanwhile and found another solution to the same objective. I found it here in the layout of the Joomla website:

http://www.joomla.org

I got rid of the second wrapping level (#wrapper-left, #wrapper-right, #wrapper-center), just keeping the main parent wrapper, and applying the background which corresponded previously to the lateral wrappers, now as an only larger background assigned to body and centered to the top, like this:

<div id="wrapper">
<!-- content -->
</div>

body {
background:#FFFFFF url(../images/lateral_header.jpg) top center no-repeat;
}

#wrapper {
/* before: width:1048px;*/
width:960px;
text-align:left;
margin: 0 auto;
}

What do you think? You think this is a better approach?