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?
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;
}
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With