11

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?

3 Answers 3

22

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;
}
10
  • What?? So how would i position the floated content a few pixels from the left?
    – dave
    Jan 8, 2011 at 1:23
  • So only way to position left-right floated elements within an element is to use the floated element's parent's padding property?
    – dave
    Jan 8, 2011 at 1:26
  • @dave yes and the relative positioning I have described in my answer. Jan 8, 2011 at 1:26
  • Hmm that seems odd, u sure thats the only way around this?
    – dave
    Jan 8, 2011 at 1:26
  • 1
    If you care about IE6 (I sure as heck don't), transparent borders don't work. Just sayin'.
    – BoltClock
    Jan 8, 2011 at 1:55
4

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);
}
3
  • 1
    best solution currently, also can prevent side effect like onClick event's offset positionning . should be current answer IMHO
    – DiaJos
    Nov 20, 2019 at 17:02
  • 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)
    – Nils
    Jan 20, 2021 at 12:19
  • The @jacobedawson solution using transform: translateX is the modern and correct technique for this scenario. Nov 17, 2022 at 12:16
1

@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
{
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.