CODEWITHSUNDEEP
csslayout
Audrey
Audrey

Reputation: 59

100% width Issue in Chrome

I'm trying to create liquid layout, so that the left side of the site expands based on the screen size, while the right side stays a fixed width. This works fine in IE, but in Chrome the left side is only expanding the length of the content within, not the full length of the space.

#bbContent{width:100%; min-width:829px;}
#leftActivity
{
float:left;
margin-right:334px;
min-width:421px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:right;
width:320px;
margin:18px 14px 0 -334px;
}

Upvotes: 0

Views: 1304

Answers (2)

Audrey
Audrey

Reputation: 59

I corrected the solution by adding a wrapper around the left side, and removing the float from #leftActivity. Adding a negative margin on the wrapper, and removing the negative margin from the right side.

#leftWrap{float:left; width:100%; min-width:421px; margin-right:-334px;}
#leftActivity
{
margin-right:334px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:left;
width:320px;
margin:18px 14px 0 0px;
}

Upvotes: 0

Huangism
Huangism

Reputation: 16438

Is this what you are looking for?

http://jsfiddle.net/KnVrA/1/

it makes sense for leftActivity not to expand since it is floating, if the content is not that long then it would not expand

Edit: Used Kyomu's fiddle and took out some stuff and rearranged some stuff

Update: using percent based http://jsfiddle.net/KnVrA/2/

you can add wrappers inside of the left to create padding on the right side

Upvotes: 1

Related Questions