asked on

CSS column trouble

Good morning. I am having trouble with CSS columns. On this page:

http://test2.ebwebwork.com/pages/The-Book.cfm

You can see that the white, left column and the orange, right column are of different lengths. What can I do to make them the same length .... to both line up at the bottom of the container, even if one column has a lot more content than the other?

Thank you for your help. Here is the CSS / HTML:

.grid{
max-width:1020px;
margin:auto auto;
padding:0;
background-color:#fff;
}

.col_4	{
padding:1%;
margin-top:0;
margin-right:2%;
margin-bottom:0;
margin-left:0;
width:30%;
float:left;
}

.col_8	{
padding:1%;
margin-top:0;
margin-left:2%;
margin-right:0;
margin-bottom:0;
width:66%;
float:left;
}

.col_12	{
padding:0;
margin:0;
clear:both;
background-color:#292929;
}

Open in new window

<div class="col_8" style="background-color:#fff;">


<h1>The Book</h1>
<p>Left content here.</p> 

</div>



<div class="col_4" style="background-color:#f39c22;">

<p>Right column content here.</p> 

</div>

Open in new window

Big Monty

try adding a min-height: 109px; to both columns and see if that resolves the issue

Scott Fell

If the content is going to be static, the best thing is to give the 2 divs the same class to make them the same height.

.col{height:300px;}

Open in new window

or even better

@media (min-width: 768px){
.col {height:300px;)
}

Open in new window

<div class="col_8 col" style="background-color:#fff;">


<h1>The Book</h1>
<p>Left content here.</p> 

</div>



<div class="col_4 col" style="background-color:#f39c22;">

<p>Right column content here.</p> 

</div>

Open in new window

fyi at line 119 to 123 you have and extra closing li tag that needs to be removed.

</li>


</li>
</ul>

Open in new window

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eric Bourland

ASKER

Friends,

Thanks for these ideas.

>>>fyi at line 119 to 123 you have and extra closing li tag that needs to be removed.

Fixed. Good catch, Scott. Thank you.

>>>min-height: 109px

Tried that ... fraid that did not do the trick.

Cathal I am trying your idea now. BRB.

Eric

Eric Bourland

ASKER

Cathal, your solution worked quite well.

Question:

>>>Though it would be better to give your sidebar and content div a unique class to target rather than using bootstraps classes.

Can you give me an example? I would like to do this right. =)

Thank you. =)

Eric

SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eric Bourland

ASKER

Makes sense and works like a charm. Thank you Cathal. Thank you also Scott and Monty.

Hope you all have a really good day.

Eric