Why can't floated elements set their left and right margins

html css xhtml layout

11,846

Solution 1

Margins do not move floated elements, they "push content away".

If you want to move the floated element, you could give it the following CSS rules:

#content {
    position: relative;
    left: 30px;
}

An alternative is giving the element a transparent border:

#content {
    border-left: 30px transparent;
}

If you are just looking to position a div inside of another div, then use absolute positioning:

#wrapper {
    position: relative; /* required for absolute positioning of children */
}

#content {
    position: absolute;
    left: 0;
}

Solution 2

A more recent CSS technique that works perfectly in this scenario is to use the CSS transform property with a translate X or Y. This acts on the floated element only, so does not have the unintended effect of moving other elements around.

An example transform is this:

.floated-element {
  // move the floated element 10 pixels to the left
  transform: translateX(-10px);
}

Solution 3

@Marcus's answer is good. Another way to fake having margins on a floated element is to put the content inside of another container and use padding:

.outer
{
    float: left;
    padding: 10px;
}

.inner
{
}

11,846

Author by

dave

Updated on June 13, 2022

Comments

dave almost 2 years

In a wrapper div, the floated elements don't seem to respond to left and right margin settings. Example:

html:

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

css:

#wrapper
{
   width:       1000px; 
   display:         block;
   margin-left:         auto;
   margin-right:    auto;
   overflow:            hidden;
}

#content
{
   width:               400px;
   height:              200px;
   display:             block;
   float:               left;
   margin-left:         30px;
}

The #content ignores its left margin setting. Why?

dave over 13 years

What?? So how would i position the floated content a few pixels from the left?
dave over 13 years

So only way to position left-right floated elements within an element is to use the floated element's parent's padding property?
Marcus Whybrow over 13 years

@dave yes and the relative positioning I have described in my answer.
dave over 13 years

Hmm that seems odd, u sure thats the only way around this?
Marcus Whybrow over 13 years

@dave You could use the border as an alternative, see modified answer.
dave over 13 years

So if relative position is the way to position element's in a container, should i even use floats?
Marcus Whybrow over 13 years

@dave What are you trying to achieve?
dave over 13 years

Good question lol..basically i have this container, and in the container i have floated elements. With one of the floated elements i just wanted to position them using margins and floats.
Marcus Whybrow over 13 years

I have tacked on another bit to my answer.
BoltClock over 13 years

If you care about IE6 (I sure as heck don't), transparent borders don't work. Just sayin'.
Webwoman over 4 years

best solution currently, also can prevent side effect like onClick event's offset positionning . should be current answer IMHO
Nils over 3 years

This seems to be actual intended behavior whereas the accepted solution feels a lot like a "hack" more than a solution (easily said 10 years later)