Solved

CSS column trouble

Posted on 2014-01-31
7
267 Views
Last Modified: 2014-01-31
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

0
Comment
Question by:Eric Bourland
7 Comments
 
LVL 32

Expert Comment

by:Big Monty
Comment Utility
try adding a min-height: 109px; to both columns and see if that resolves the issue
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
If no static height for the columns then pop this in before you closing body tag.

<script>
$(function() {
	getmaxheight = Math.max($('.col_12.column > .col_8.column').height(),$('.col_12.column > .col_4.column').height());
	$('.col_12.column > .col_8.column').height(getmaxheight);
	$('.col_12.column > .col_4.column').height(getmaxheight);
})
</script>

Open in new window

Though it would be better to give your sidebar and content div a unique class to target rather than using bootstraps classes.
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
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
0
 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
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
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
Comment Utility
You have these two divs - one is the main content and one is the sidebar
<div class="col_8 column">
...
</div>
<div class="col_4 column">
...
</div>

Open in new window

Just add another class e.g.
<div class="col_8 column main-content">
...
</div>
<div class="col_4 column sidebar">
...
</div>

Open in new window

Then we can tidy up the javascript and do better targeting.
<script>
$(function() {
	getmaxheight = Math.max($('.main-content').height(),$('.sidebar').height());
	$('.main-content').height(getmaxheight);
	$('.sidebar').height(getmaxheight);
})
</script> 

Open in new window

0
 
LVL 3

Author Closing Comment

by:Eric Bourland
Comment Utility
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
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now