CODEWITHSUNDEEP
htmlcssalignment
davide
davide

Reputation: 2152

Horizontally align elements shifted by a float

In the following test page there are a video and an iframe elements, both with margin-left: auto; margin-right: auto; CSS style.
The video element is shifted toward right by a float: left; element containing a few textual lines, therefore it is misaligned with the lower iframe.

I'd like the iframe to be centrally aligned with the video, keeping the video in its current position. 

<div style="float: left; border-right: thin solid;">
    A few colored entries here.
</div>


<div style="margin-left: auto; margin-right: auto;">
    <video src="..."
    style="display: block; margin-left: auto; margin-right: auto;">
    </video>
</div>


<iframe src="..." style="width: 300px; height: 100px;
display:block; margin-left: auto; margin-right: auto;">
</iframe>

Upvotes: 0

Views: 1966

Answers (2)

ZombieCode
ZombieCode

Reputation: 1661

You need to wrap the whole thing in a wrapper div. Then you can float both divs to the left and still have the insides automatically center.

<div id="Wrapper">
    <div class="leftColumn">      
        A few colored entries here.  
    </div>      
    <div class="rightColumn">
        <div style="margin-left: auto; margin-right: auto;">      
            <video src="..."      style="display: block; margin-left: auto; margin-right: auto;">      </video>  
        </div>      

        <iframe src="..." style="width: 300px; height: 100px;  display:block; margin-left: auto; margin-right: auto;">  
        </iframe>  
    </div>
</div>

#Wrapper { overflow: hidden; }
.leftColumn { float: left; border-right: thin solid; width:  200px; }
.rightColumn { float: left; width: 800px; }

I didn't test the code, but it should work.

Upvotes: 2

Jason
Jason

Reputation: 3360

How about putting the two divs that are on the right in their own div, then floating that to the right and using margin:auto (like you have currently) to center them. That way instead of being centered on the page they are centered on the same div, and one shouldn't be pushed farther than the other regardless of the other float.

<div style="float: left; border-right: thin solid;">
    A few colored entries here.
</div>

<div style ="float:right;">
<div style="margin-left: auto; margin-right: auto;">
    <video src="..."
    style="display: block; margin-left: auto; margin-right: auto;">
    </video>
</div>



<iframe src="..." style="width: 300px; height: 100px;
display:block; margin-left: auto; margin-right: auto;">
</iframe>
</div>

If I misunderstood and you didn't want to float those to the right, just ignore that and use margins instead. Either way adding a container div around the ones you want centered together should take care of it.

Upvotes: 1

Related Questions