CODEWITHSUNDEEP
csshtml
user2510920
user2510920

Reputation: 25

3 divs next to each other

I am having trouble aligning 3 divs next to each other. I have never had this this issue before, but now I am making a template where the background has a 100% width (never ends) for each element of the webpage.

The element I want to align 3 divs horizontally is not working for me. I can get two divs next to each other, but when I try to align the 3rd div, the 3rd div will align, but the entire element gets messed up somehow.

Your help is greatly appreciated!

Here is the full code. I took out other website elements to simplify the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Website</title>

<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

strong {
    font-weight:bold;color:#0289ce;
}

em {
    font-style:oblique;
}

p {
    margin:15px 0;
}

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}

h1 {font-size:180%;}
h2 {font-size:150%;}
h3 {font-size:125%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}

a:link {color:#0289ce;}
a:hover {color:#f64274;}

/*End RESET - Begin Full Width CSS*/
    body {
        background:#FFFFBF;
        color:#2D1F16;
        font:13px Helvetica,  Arial,  sans-serif
    }

    .wrap {
    position:relative;
    margin:0 auto;
    width:900px;
    background-color: #EC3515;
    }
.wrapHeader {
    position:relative;
    margin:0 auto;
    width:900px;
    background-color: #9FF;
}

.wrapSlider {
    position:relative;
    width:900px;
    margin-right: auto;
    margin-left: auto;
    top: 67px;
    right: 32px;
}
.wrapPackages {
    position:relative;
    width:900px;
    margin-right: auto;
    margin-left: auto;
}
.multipleDivs {
    height: auto;
    width: 100%;
    background-color: #CFF;
    clear: both;
    position: relative;
}
.wrapInfo {
    position:relative;
    width:900px;
    margin-right: auto;
    margin-left: auto;
    background-color: #A6FFFF;
    height: auto;
    clear: both;
}
#infoContent1 {
    background-color: #666;
    height: auto;
    width: 300px;
    float: left;
    position: relative;
}
#infoContent2 {
    background-color: #999;
    height: auto;
    width: 300px;
    float: left;
    position: relative;
}
#infoContent3 {
    background-color: #CCC;
    height: auto;
    width: 300px;
}


.wrapContent {
    position:relative;
    width:100%;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    }




    #header, #footer {
        width:100%;
        float:left;
        padding:15px 0;
    }

    #header {
    background-color: #FFF;
    }

    #header .logo {
    float:left;
    width:400px;
    }

    #header p {
        float:right;
        width:400px;
        margin:0;
    }

    #content {
    padding:15px 0;
    clear:both;
    background-color: #F9C;
    }


 .imageSlider {
    height: 570px;
    width: 100%;
    color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/bgSlider2.jpg);
}
.package {
    height: auto;
    width: 100%;
    background-color: #CCC;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}





    #footer {
    background:#EC3515;
    text-align:center;
    }

    #footer a {
        color:#fff;
    }
</style>

</head>

<body>

<div id="header">
    <div class="wrapHeader">
        <div class="logo">
            <a href="#"><img src="images/#.png" width="250" height="62" /></a>
         </div>
      <p>Sample text</p>
    </div>

</div>

<div class="wrapContent">
    <div id="content">



<div class="multipleDivs">
    <div class="wrapInfo">  
           <div id="infoContent1">
           <p>Div 1</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>    

<div id="infoContent2">
           <p>Div 2</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <div id="infoContent3">
           <p>Div 3</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>    

    </div>
</div>    






<div class="package">  
    <div class="wrapPackages">
      <img src="images/sampleImage.jpg" width="900" height="475" border="0" /></div>
</div>

    <p>&nbsp;</p>
    <p>&nbsp;</p>   

    </div>
</div>

<div id="footer">
<div class="wrap">
            <p>&copy; 2013 - <a href="http://fillertext.com">Sample Text</a></p>
    </div>
</div>

</body>
</html>

Upvotes: 1

Views: 647

Answers (3)

Ashish Sharma
Ashish Sharma

Reputation: 342

give all of the divs you want to be effected the same class name and add the css to that element:

 <div class="floaters">1</div> <div class="floaters">2</div> <div
 class="floaters">3</div>

and

.floaters {
float:left;
}

Upvotes: 1

ericdc
ericdc

Reputation: 11279

You need float left only once.

http://jsfiddle.net/NvbnY/2/

div {
float:left;
}

You had 3 different floats that are causing your issue:

Remove all of this:

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
 }
.alignleft {
float: left;
}
.alignright {
float: right;
}

Alternately give all of the divs you want to be effected the same class name and add the css to that element:

<div class="floaters">1</div>
<div class="floaters">2</div>
<div class="floaters">3</div>

and 

.floaters {
float:left;
}

In action - http://jsbin.com/iqegob/1/edit

You could also add float:left; to #infoContent3

Upvotes: 2

swapnesh
swapnesh

Reputation: 26722

Add overflow:hidden; in #infoContent3

Output --

overflow

Upvotes: 0

Related Questions