CODEWITHSUNDEEP
css
Sylvia585
Sylvia585

Reputation: 301

Three Column Layout using float

How would I go about a three column layout to keep the background image from collapsing and get everything aligned to the top. I've got it almost right, but my ads keep falling below everything else. Could it be because I've got the #content as an inline block? I need testimonials on the left, content in the center, and ads to the right. Plus have the background image still visible. 

<div id="wrapper">

<div id="inner-wrapper">
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>

<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
</div><!-- end #inner-wrapper -->

<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>

</div><!-- end #wrapper -->
</body>

CSS: (thus far)

#wrapper{background-image: url(images/columns-195-570-195.png);
width: 960px;
align-content: center;}

#testimonials{
    float: left;
    width: 195px;
}

#content{
  display: inline-block; 
    width:570px; 
}

#ads{
    float: right;
    width: 195px;}

Thanks!

Upvotes: 1

Views: 57

Answers (4)

GibboK
GibboK

Reputation: 73908

Try to use float: left; on each column, you can add (if necessary) a float: clear; on your latest column.

Regarding your issue with the image, you need to set the size and position for the wrapper div.

Example also visible here: https://jsfiddle.net/er4h0e95/6/

#wrapper {
    position:absolute;
    background-image: url(http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg);
    width: 960px;
    height:100%;
    align-content: center;
}
#testimonials {
    float: left;
    width: 195px;
}
#content {
    float: left;
    width:570px;
}
#ads {
    position:absolute;
    float: left;
    width: 195px;
    right:0;
}
<div id="wrapper">
    <div id="inner-wrapper">
        <div id="content">
            <div id="testimonials">
                
<h2>What My Clients Say</h2>

                <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
            </div>
            
<h1>Heading</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
        </div>
    </div>
    <!-- end #inner-wrapper -->
    <div id="ads">
        
<h2>Ads</h2>

        <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
    </div>
</div>
<!-- end #wrapper -->

Upvotes: 0

Sebastian Brosch
Sebastian Brosch

Reputation: 43564

OK here you can find both solutions. A solution with floating (you need it) and a solution with flexbox.

Solution only with floating

#wrapper{
    align-content:center;
    background-image: url(images/columns-195-570-195.png);
    width: 960px;
}
#testimonials{
    float:left;
    width:195px;
}
#inner-wrapper {
    float:left;
}
#content {
    display:inline-block; 
    width:570px; 
}
#ads {
    float:left;
    width:195px;
}
<div id="wrapper">
    <div id="inner-wrapper">
        <div id="content">
            <h1>Heading</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
        </div>
        <div id="testimonials">
            <h2>What My Clients Say</h2>
            <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
        </div>
    </div><!-- end #inner-wrapper -->
    <div id="ads">
        <h2>Ads</h2>
        <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
    </div>
</div><!-- end #wrapper -->

Solution with flexbox

#wrapper{
    align-content:center;
    background-image:url(images/columns-195-570-195.png);
    display:flex;
    width:960px;
}
#testimonials{
    width:195px;
}
#content{
    width:570px; 
}
#ads {
    width:195px;
}
<div id="wrapper">
    <div id="testimonials">
        <h2>What My Clients Say</h2>
        <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
    </div>
    <div id="content">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
    </div>
    <div id="ads">
        <h2>Ads</h2>
        <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
    </div>
</div>

You don't need the wrappers or floats to get a working three-column-layout.

Upvotes: 1

Benneb10
Benneb10

Reputation: 1489

Inner-wrapper is creating a div displaying testimonials and content as block that is pushing the ads to a new line. Either move the end div to contain all three sections, or display the inner-wrapper and ads as inline-block so they line up correctly.

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="content">            
            <h1>Heading</h1> 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
        </div>
        <div id="testimonials">
            <h2>What My Clients Say</h2>   
            <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
        </div>
        <div id="ads">              
            <h2>Ads</h2>   
            <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
        </div>
    </div>
    <!-- end #inner-wrapper -->
</div>
<!-- end #wrapper -->

To center content add:

#wrapper {
    background-image: url(images/columns-195-570-195.png);
    width: 960px;
    margin: 0 auto;
}

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

If you change the order of testimonials and content div's in HTML, it will work fine. Demo

#testimonials {
    float: left;
    width: 195px;
}
#content {
    display: inline-block;
    width:570px;
}
#ads {
    float: right;
    width: 195px;
}

HTML:

 <div id="testimonials">.. </div>

<div id="content">..</div>

Upvotes: 0

Related Questions