2 replies [Last post]
nicko
nicko's picture
Offline
newbie
Santa Cruz, CA
Last seen: 13 years 34 weeks ago
Santa Cruz, CA
Joined: 2007-04-03
Posts: 10
Points: 0

Hello!

I'm brand new to csscreator, and I have come here to look for help on a specific problem. I'm having trouble with float:right. I have a left slice div, a center content area div, a right slice div and one to contain the three. The left slice (using float:left) works fine however the right slice shows up at the bottom-right corner, below the content div. I have tried using the "clear" tag but with no success. Here is a bit of the code to nibble on:

#sidesliceleft
{width:7px;
height:542px;
background-image:url(../images/backgrounds/bg_left_main_ds.jpg);
background-repeat:no-repeat;
float:left;}

#contentwrapper
{height:542px;
width:857px;
text-align:center;
margin-left:auto;
margin-right:auto;}

#contentarea
{
height:542px;
width:843px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
float:none;
margin-left:auto;
margin-right:auto;

}
#sidesliceright
{width:7px;
height:542px;
background-image:url(../images/backgrounds/bg_rt_main_ds.jpg);
background-repeat:no-repeat;
float:right;}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

we would need the html as

we would need the html as well, or better yet a link to a test page.
I'll go ahead and guess that your right column comes after the center column in the source order - it won't work that way. Floats need to precede the content their floating next to. So you would have the left column, then the right column, and the non floating center column. You could also float the center column to avoid the source re-order.

nicko
nicko's picture
Offline
newbie
Santa Cruz, CA
Last seen: 13 years 34 weeks ago
Santa Cruz, CA
Joined: 2007-04-03
Posts: 10
Points: 0

fixed

That was the problem. Thanks!