CODEWITHSUNDEEP
htmlcss
user3086732
user3086732

Reputation:

divs wont fit together properly

i cant get the divs to line up properly, they either jump out of the container or they overlap each other, i want the 3 divs spaced equally in the container but it wont work, each div is named accordingly to position and i have played around with clear and float settings but it just wont go

HTML :

 <div class="triplecontainer">

<div class="leftbox">
<p> LEFT </p>
</div>


<div class="middlebox">
<P> MIDDLE </P>
</div>


<div class"rightbox">
<P> RIGHT</P>
</div>



</div>

CSS:

.triplecontainer {
height: 200px;
width: 950px;   
margin-right:auto;
margin-left:auto;
margin-top:10px;

}

.leftbox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
clear: none;
float: left;

}

.middlebox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
float:none;
clear:left

}

.rightbox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
float:none;
clear:both;

}

Upvotes: 0

Views: 69

Answers (2)

James Donnelly
James Donnelly

Reputation: 128791

I'd suggest using a fixed table display instead:

.triplecontainer {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.triplecontainer > div {
    display: table-cell;
}

JSFiddle demo.

Upvotes: 1

jschavey
jschavey

Reputation: 412

display: inline-block;

Add to all. That is what you are missing, you may still need to tweak pixel widths. Also, you have

clear: both;

Remove this! In fact, remove all clear commands.

Upvotes: 3

Related Questions