Question

I’m having an issue with some child elements within a div. The parent div is the header, which is supposed to hold a three column header in theory. There is the left column, which will be a slideshow, the middle which will be a 20px divider and the right, which will hold informational text.

The issue I am having is that the only way I can seem to get the right column to stay inline is by telling the text to align right, but this doesn’t work aesthetically because I need the text centered.

I wanted to just tell the DIV to float right, but when I do this the div always goes onto the next line rather than floating inside the header div. Here is the example of the issue (http://cbchaverhill.onedirectionconnection.com/), please ignore everything other than the header (haven’t started working on those elements just yet).

Here is my CSS:

div#header {
clear: both;
height: 300px;  
width: 900px;
margin-top: 0px;
padding: 0px;
border: 0px;
}

div#slide {
float: left;
clear: both;
height: 300px;
width: 590px;
margin-top: 0px;
padding: 0px;
border: 0px;
background: #FFFFFF;
}

div#divide {

 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
 overflow: hidden;
 width: 20px;
 height: 300px;
 float: left;
 background: url(/wp-content/themes/cbc/divide.png) no-repeat;

}

div#cbcstuff{
display:  inline-block;
float: right;
clear: both;
height: 300px;
width: 290px;
margin-top: 0px;
padding: 0px;
border: 0px;
background: #FFFFFF;
}

And here is the coding of the header:

<div id="header">

<div id="slide"></div>
<div id="divide"></div>

<div id="cbcstuff">
Calvary Baptist Church<br>
Haverhill, MA 01832
</div>

</div>

Can anyone give me some advice on how I can get the right column to align right without having to align the text right?

Thank you for your time!

~Noelle

Answer 1

Try to remove clear: both; in div#slide and div#cbcstuff. With that commands, you clear float styles.