CODEWITHSUNDEEP
htmlcsscss-float
user3169151
user3169151

Reputation: 13

Element floating right instead of left with css

I am trying to get these elements floated in the right direction. Box1, Box2 are floated left while Box3 is floated right. Then below that I am trying to get homeBlog floated left an align under Box1 with column 2 to its right and column3 floated right underneath box3. My problem is homeBlog should be floated left and align under Box1 however it is floated right under box3 and column2 and column3 are completely out of whack. What am I doing wrong here??

See code below:

.box1{ width:32.6%; 
height:250px;  
float: left; 
margin-right:1.2%;  
border-radius:10px; 
border:1px solid #CCCCCC; 
padding-right:5px; 
padding-top:5px;} 

.box2{padding:3px; 
width:31%; 
height:250px;   
border-radius:10px; 
border:1px solid #CCCCCC; 
float:left; } 

.box3{ padding:0px; 
width:32%; 
height:250px;   
border-radius:10px; 
border:1px solid #CCCCCC; 
float:right; }

.slide { margin-left: auto; 
margin-right: auto; 
margin-top: 0; 
width:950px;}



.column2{width:300px; 
height:auto; 
margin-bottom:5px; 
float:left; 
margin-top:5px;}

.column3{width:300px; 
height:auto; 
margin-bottom:5px; 
float:right; 
margin-top:5px;}

.homeBlog{width:300px; 
height:auto; 
margin-bottom:5px; 
margin-top:5px; 
margin-right:15px; 
float:left; 
background:#CCCCCC; 
height:300px;}

.banner{width:950px; 
height:300px; 
background:#000000; 
margin-bottom:5px;}

.newRow{ width:950px; 
margin-left:auto; 
margin-right:auto;}



<body>
<div class="slide">

<div class="banner"></div>
<div class="box1" style="text-align: center;"><span style="font-family: 'arial black', 'avant garde'; font-size: x-large; color: #993300;"><strong>Fees and Promotions</strong></span></div>
<div class="box2"></div>
<div class="box3"></div></div>

<div class="newRow">
<div class="homeBlog"><strong>News and Updates</strong></div>

<div class="column2">
<p style="text-align: left;"><span style="font-size: large; color: #800000; font-family: arial, helvetica, sans-serif;"><strong>Comments</strong></span></p>
<span style="font-family: arial, helvetica, sans-serif;"> <a href=""><img class="alignnone size-full wp-image-1199" alt="lions" src="" width="280" height="213" /></a></span>  <span style="font-family: arial, helvetica, sans-serif;"> <a href=""><img class="alignnone size-full wp-image-1199" alt="lions" src="" width="280" height="213" /></a></span>

</div>

<div class="column3"><span style="font-size: large; color: #800000; font-family: arial, helvetica, sans-serif;"><strong>Quick Contact</strong></span> <span style="font-family: arial, helvetica, sans-serif;">[contact-form-7 id="394" title="Quick Contact"]</span></div>
</div>
</body>

Upvotes: 0

Views: 789

Answers (2)

nowhere
nowhere

Reputation: 1548

This might be needed:

<div style="clear:both"/>

Is this what you want?

http://jsbin.com/yegesume/1/edit

Upvotes: 0

Peter Herdenborg
Peter Herdenborg

Reputation: 5962

Add clear: both; to .homeBlog. I suspect it gets stuck on .box2 when trying to float to the left.

Upvotes: 1

Related Questions