CODEWITHSUNDEEP
css
YoYo
YoYo

Reputation: 45

three divs not aligned correctly

i have a problem in aligning the div's vertically,what should be problem?

here is my html code

 <div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
</div>

css

.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
} 
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
clear:both;
position:relative;
margin-left:5px;
margin-top:5px;
 }
#profile2
{
position:relative;
margin-left:310px;
margin-top:5px;    
}
#profile3
{
position:relative;
margin-left:620px;
margin-top:5px;
}

i want the three div's to be aligned vertically together inside the parent, here is the demo

Upvotes: 2

Views: 101

Answers (5)

Mathew Thompson
Mathew Thompson

Reputation: 56429

That's because of your margins. If you take clear:both off profile1 and then add float: left onto all profiles, then take off those margins.

Demo: http://jsfiddle.net/WC5gT/

Upvotes: 0

Eli
Eli

Reputation: 14827

I'm not sure why you need so many redundant codes to achieve like what you describe, just do:

.recentProfiles
{
    width:300px;
    border:2px dotted green;
    margin-left:20px;
    margin-top:10px;
}

.profiles
{
    width:300px;
    height:190px;
    border:2px dotted black;
}

Demo: http://jsfiddle.net/VvqXF/

Upvotes: 1

user1467267
user1467267

Reputation:

You get the idea of float wrong. Here's the new code: http://cdpn.io/AvJqI

HTML

  <div class="recentProfiles">

    <div class="profiles" id="profile1">
    </div>
    <div class="profiles" id="profile2">
    </div>
    <div class="profiles" id="profile3">
    </div>
    <div class="floatClear"></div>
 </div>

CSS

.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;

}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;

}
#profile1
{
float:left;
position:relative;
margin-left:5px;
margin-top:5px;

}
#profile2
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;

}
#profile3
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}

.floatClear {
  clear: both;
}

Upvotes: 0

Piet van Dongen
Piet van Dongen

Reputation: 1639

Have all the boxes float left (float: left) and remove all margin properties, like this: http://jsfiddle.net/2ABmU/

Upvotes: 0

Jacob
Jacob

Reputation: 4031

Try using float:left on class profiles and then no margin on profile1, profile2, profile3

Working example: http://jsfiddle.net/rK38V/

Upvotes: 0

Related Questions