lundi 29 juin 2015

6 sub-DIV's, one container DIV, Grouped in 3 pairs of 2, left,center,right justified

Was my title strong enough?

I want a DIV that goes a horizontal length of a page, then I want 6 divs inside of that that are grouped in 2 (info, pic) Where the group on the left is fastened to the wall, the group on the right is fastened to the wall, and the group in the center is exactly in the center.

Here's my code so far:

<div class="contactus.container">

<div class="contactus.left">
    <div><b>asdf</b></div>
    <div><b>sadf</b></div>
    <div>asdf</div>
    <div>sadf</div>
    <div>asdf</div>
    <div>asdf</div>
    <div>af</div>
</div>
<div class="content" style="display:inline-block" >
    <img align="left" alt="pic" class="bold" 
        src="profilepic.jpg" 
        style="width: 125px; height: 125px;" vspace="0" />
</div>

<div class="contactus.center">
    <div><b>asdf</b></div>
    <div><b>sadf</b></div>
    <div>asdf</div>
    <div>sadf</div>
    <div>asdf</div>
    <div>asdf</div>
    <div>af</div>
</div>

<div class="content" style="display:inline-block">
    <img align="left" alt="pic" class="bold" 
        src="profilepic.jpg" 
        style="width: 125px; height: 125px;" vspace="0" />
</div>

<div class="contactus.right">
    <div><b>asdf</b></div>
    <div><b>sadf</b></div>
    <div>asdf</div>
    <div>sadf</div>
    <div>asdf</div>
    <div>asdf</div>
    <div>af</div>
</div>

<div class="content" style="display:inline-block;">
    <img align="right" alt="pic" class="bold" 
        src="profilepic.jpg" 
        style="width: 125px; height: 125px;" vspace="0" />
</div>
<div style="clear:both;"></div>
</div>

And here's the CSS:

.contactus.container {
    width:100%;
    text-align:center;
}

.contactus.left {
    float:left;
    width:100px;
}

.contactus.center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

.contactus.right {
    float:right;
    width:100px;
} 

.content {
    display: inline-block;
      vertical-align: top;

Getting al ittle frustrated now. All it does is have a line down the left side. All 6 divs.

Aucun commentaire:

Enregistrer un commentaire