/    Sign up×
Community /Pin to ProfileBookmark

css float column issues !!!

Copy linkTweet thisAlerts:
Jun 25.2009

I thought I knew how to use the css float property to make a left column and right column, but apparently I don’t…

My code uses a series of DIV tags inside each other, each one with a different background image to create a rounded border around a div called “content”.

content is inside a div with the following properties:
#bottomcenter{width:625px; min-height:538px; height:auto;}

inside content, the first thing I add is a “leftside”
#leftside {float:left; padding:35px 0 0 26px; width:220px; margin:0;}

then, i add the “rightSide”
#rightSide{width:339px; min-height:490px; margin:0 29px 25px 260px; padding:35px 0 0 0;}

notice how the left margin of rightSide is greater than the width of leftside? I always thought that would make it appear fine…but I’m having two problems…

#1. In IE, the “rightSide” appears with a left margin, but always BELOW the content of “leftside”…

#2. In both IE and FF, none of the divs surrounding “content” expand to hold the contents…they stay at the min-height of 538px; (as defined in bottomcenter)

Any help would be appreciated…

you can see the code in “action” at [url]http://www.c2cakes.ca/sandbox[/url] (all the links work :S)

TIA

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@anna55Jun 25.2009 — #1: You have to deal with the Doubled Float-Margin Bug. To get that fixed you use
[code=php]* html #rightSide{... display: inline;} [/code]
http://www.positioniseverything.net/explorer/doubled-margin.html

or
[code=php]* html #rightSide{ margin-left: -260px;} [/code]
Copy linkTweet thisAlerts:
@WebWarriorJun 25.2009 — It's highly likely that your wrapping div's don't expand to hold the content, because you didn't "clear" the floats. Floating elements are taken out of the "normal flow" and don't occupy any space until "cleared." The last element inside the content (after all floating elements) must have a clear: left; CSS property set (I believe you are using only float: left; in your content so this will be sufficient otherwise clear: both; is needed).

Example:

.clear

{

clear: left;


}

<div id="leftSide">Some content...</div>

<div id="rightSide">Some content...</div>

<br class="clear" />

This will add extra markup to your code (<br />), so you could attach the clear property to an element following the leftSide and rightSide (if you had one).

Also, have you considered maybe using float: right; on the rightSide? This would create a "virtual gutter" between the leftSide and rightSide without using margin-left. In that case you would have to change your CSS to .clear { clear: both; }.

As for IE 6 margin problem. Use "!important" property in your CSS.

For exmaple:

#rightSide

{

margin: 0 29px 25px 260px !important; /* All modern browsers will use this property because or !important */

margin: 0 18px 15px 220px; /* IE 6 does not recognize !important so it will use this */

}

Note: These numbers are not necessarily the ones that should be used in your project. I just used them as an example of how this can be done to fix IE 6 margin and other (padding, width, height, etc...) issues with !important.
×

Success!

Help @irf2k spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...