Reputation: 737
I have an issue with my CSS - I am have two divs - "section1" and "section2". I want them to be displayed side by side but they are being displayed as seen in the picture. Does anyone know how to display them side by side?
<div id="section1">
<h1><London></h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants</p>
</div>
<div id="section2">
<h2><London></h2>
<p1>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants</p>
</div>
</div>
#section1
{
float:center;
padding:5px;
background-color:lime;
margin-left:20px;
width:300px;
}
#section2
{
float:right;
background-color:lime;
margin-left:10px;
width:300px;
}
Upvotes: 1
Views: 50
Reputation:
You can also add clear:both; or clear:none; to your css. This allows relative objects to park side by side, or be forced below an existing object. This command works best on crowded pages.
Upvotes: 1
Reputation: 223
Your float property should be left not center and right and hopefully that moves them side by side.
Upvotes: 2