CODEWITHSUNDEEP
htmlcss
user3075987
user3075987

Reputation: 881

Can't get 3 divs to float side by side

I'd like to get my 3 divs side by side. The 2nd div (the middle one) would be at 10% so there is space between the left and right div. I set my left and right divs to be at 45%. What am I doing wrong?

Here's my jsfiddle: http://jsfiddle.net/huskydawgs/sukcv46p/22/

Here's my HTML:

    <div id="wrapper-segmentation">
    <div id="leftcolumn">
    <div class="wrapper-promo">
        <div class="title-top">
            <h2 class="block-title">
                Three states or less</h2>
        </div>
        <div class="promo-content">
            <p>Bid and RFP Notification Only</p>
        <p>Online and email support</p>
            <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
        </div>
    </div>
    <div id="centercolumn">
        Center
    </div>
    <div id="rightcolumn">
    <div class="wrapper-promo">
        <div class="title-top">
            <h2 class="block-title">
                National or Regional</h2>
        </div>
        <div class="promo-content">
            <p>Bid and RFP Notification Only</p>
        <p>Online and email support</p>
            <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
    </div>
</div>

Here's my CSS:

#wrapper-segmentation {
     width: 100%;
     margin: 0 auto;
}

#leftcolumn, #rightcolumn, #centercolumn {
    float: left;
    color: white;
    text-align: center;
}

.segmentation-left {
    background-color: #e2e3e4;
    width: 100%;
}

#leftcolumn {
     border: 1px #f66511;
     width: 45%;
     background-color: #e2e3e4;
}

#centercolumn {
     width: 10%;
     background-color: #ffffff;
}

#rightcolumn {
     width: 45%;
     background-color: #e2e3e4;
}

.wrapper-promo {
    background-color: #e2e3e4;
    width: 100%;
}

.title-top {
    background-color: #2251a4;
    height: 40px;  
    line-height: 40px;
}


.title-top-cell {
    display: table-cell;
    vertical-align: middle;
}


.promo-content {
    margin: 20px;
    padding: 0 0 10px 0;
}

h2 {
    font-family:Arial,sans-serif;
    font-size:19px;
    font-weight: bold;
    color:#fff;
    margin: 10px 0 -10px 0;
    text-transform:none;
}

    h2.block-title {
        font-size:22px;
        margin: 0;
        text-align: center;
        text-transform:none;
    }

    .promo-content p {
    font-family: Arial,sans-serif;
    font-size: 14px;
    color: #232323;
    line-height: 20px;
    text-align: center;
 }

Upvotes: 0

Views: 82

Answers (3)

tim_po
tim_po

Reputation: 105

I know css might be more intuitive for you but in this situation I definitely recommend you to use html <tables> just make a table with 1 row and 3 columns.

You can set many things in css to define how the end result will look!

Good luck :)

Upvotes: 0

AmmarCSE
AmmarCSE

Reputation: 30607

You need to extract #rightcolumn and #centercolumn out of #leftcolumn and have them be sibling divs

#wrapper-segmentation {
     width: 100%;
     margin: 0 auto;
}
#centercolumn{
    color:black !important;
}
#leftcolumn, #rightcolumn, #centercolumn {
    float: left;
    color: white;
    text-align: center;
}

.segmentation-left {
    background-color: #e2e3e4;
    width: 100%;
}

#leftcolumn {
     border: 1px #f66511;
     width: 45%;
     background-color: #e2e3e4;
}

#centercolumn {
     width: 10%;
     background-color: #ffffff;
}

#rightcolumn {
     width: 45%;
     background-color: #e2e3e4;
}

.wrapper-promo {
    background-color: #e2e3e4;
    width: 100%;
}

.title-top {
    background-color: #2251a4;
    height: 40px;  
    line-height: 40px;
}


.title-top-cell {
    display: table-cell;
    vertical-align: middle;
}


.promo-content {
    margin: 20px;
    padding: 0 0 10px 0;
}

h2 {
	font-family:Arial,sans-serif;
	font-size:19px;
    font-weight: bold;
	color:#fff;
    margin: 10px 0 -10px 0;
    text-transform:none;
}

    h2.block-title {
        font-size:22px;
        margin: 0;
        text-align: center;
        text-transform:none;
    }

    .promo-content p {
    font-family: Arial,sans-serif;
    font-size: 14px;
    color: #232323;
    line-height: 20px;
    text-align: center;
 }
<div id="wrapper-segmentation">
    <div id="leftcolumn">
	<div class="wrapper-promo">
		<div class="title-top">
			<h2 class="block-title">
				Three states or less</h2>
		</div>
		<div class="promo-content">
            <p>Bid and RFP Notification Only</p>
        <p>Online and email support</p>
            <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
		</div>
    </div>
    
</div>
    <div id="centercolumn">
        Center
    </div>
    <div id="rightcolumn">
	<div class="wrapper-promo">
		<div class="title-top">
			<h2 class="block-title">
				National or Regional</h2>
		</div>
		<div class="promo-content">
            <p>Bid and RFP Notification Only</p>
        <p>Online and email support</p>
            <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
    </div>

Upvotes: 0

Peter Rasmussen
Peter Rasmussen

Reputation: 16942

You are missing a closing tag for your div:

<div class="wrapper-promo">
    <div class="title-top">
        <h2 class="block-title">
            Three states or less</h2>
    </div>
    <div class="promo-content">
        <p>Bid and RFP Notification Only</p>
    <p>Online and email support</p>
        <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
    </div>
</div><!-- This was missing -->

Fiddle

Upvotes: 3

Related Questions