• 0

floating divs


Question

How can I float a div in the center and have another div next to it

<style type="text/css">
.mcontainer{
background-color: #fff;
width: 525px;
margin-left: 9px;
padding: 10px;
border: 1px solid black;
float: center;
}

.scontainer{
background-color: #fff;
width: 250px;
height: 400px;
margin-left: 9px;
padding: 10px;
border: 1px solid black;
float: right;
}
</style>
<div class="scontainer">lalal</div>
<div class="mcontainer">

<iframe name="mcc" id="mcc" src="[url="http://google.com"]http://google.com[/url]" width="100%" height="400px" frameborder="0" allowtransparency="yes" scrolling="No"></iframe>
       	</div>
</div>

but have "mcontainer" in the center and have "scontainer" on its immdiate right?

Thanks.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

markup...

<div id="scontainer">
</div>
<div id="mcontainer">
</div>

css...

#scontainer    {
       float : right;
       width: 400px;
}
#mcontainer    {
       margin-right: 400px;
}

Link to comment
Share on other sites

  • 0

That's not what I want, sorry.

I mean something like this

............[----------][----]

............[----------][----]

............[----------][----]

So one div is in the center and the other div on the side right next to it

Link to comment
Share on other sites

  • 0

Probably would need to use absolute positioning. Is the centred div fixed width? If so, centre the first div like you would normally do. Then for the side div, give it this:

#sidediv {

position: absolute;

left: 50%;

margin-left: half-the-width-of-centred-div;

}

That should work.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.