Same Height

Fantastic5 · June 22, 2014, 7:36pm

Hello
My code:

<html>
<head>
<style>
.content{
	width: 900px;
	margin: 0px auto;
}
.clear{
	clear: both;
}

.content-left{
	float: left;
	width: 300px;
	height: 100%;
	background-color: red;
}

.content-right{
	float: left;
	width: 600px;
	background-color: green;
}
</style>
</head>
<body>
<div class="content">
	<div class="content-left"><br/><br/><br/></div>
	<div class="content-right"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
	<div class="clear"></div>
</div>
</body>
</html>

I have content in “content-right”, what i what is same height in “content-left”. For example, if content-right increase, content-left increase too.

How i can do that?

Thanks!

PaulOB · June 22, 2014, 8:02pm

HI,

For ie8+ you can simply use the display:table /cell rules like so:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<head>
<style>
.content {
	width: 900px;
	margin: 0px auto;
	display:table;
}
.content-left {
	width: 300px;
	background-color: red;
	display:table-cell;
	vertical-align:top;
}
.content-right {
	width: 600px;
	background-color: green;
	display:table-cell;
	vertical-align:top;
}
</style>
</head>
<body>
<!--IE8+ only -->
<div class="content">
		<div class="content-left">Left<br/>
				<br/>
				<br/>
		</div>
		<div class="content-right">Right<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
		</div>
</div>
</body>
</html>

No need for floats or clearing.

If you want to support IE7 and under then you will need to revert to flooats and a rather hacky negative margin trick.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<head>
<style>
.content {
	width: 600px;
	margin: 0px auto;
	border-left:300px solid red;
background-color: green;
}
.content:after{
	content:" ";
	display:block;
	clear:both;
	height:0;
}
.clear {
	clear: both;
}
.content-left {
	float: left;
	width: 300px;
	margin-left:-300px;
	position:relative;
}
.content-right {
	float: left;
	width: 600px;
}
</style>
</head>
<body>
<div class="content">
		<div class="content-left">Left<br/>
				<br/>
				<br/>
		</div>
		<div class="content-right">Right<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
		</div>
</div>
</body>
</html>

Never forget the doctype

Fantastic5 · June 22, 2014, 8:08pm

Thanks. Was just an example. I will try understand the displays.
Then, i do poorly using “float”?

ralphm · June 22, 2014, 10:48pm

Well, floats are fine for columns, but it’s hard to make them stay the same height as each other, so they aren’t the best option if that’s what you want.

Fantastic5 · June 23, 2014, 1:14am

Thanks.

I have another problem, if i add another “box” inside? I want the same size.
Example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<head>
<style>
.content {
	width: 900px;
	margin: 0px auto;
	display:table;
}
.content-left {
	width: 300px;
	background-color: red;
	display:table-cell;
	vertical-align:top;
}
.content-right {
	width: 600px;
	background-color: green;
	display:table-cell;
	vertical-align:top;
}

.content-left-2{
	width: 200px;
	background-color: yellow;
	margin: 0px auto;
}
</style>
</head>
<body>
<!--IE8+ only -->
<div class="content">
		<div class="content-left">
			<div class="content-left-2">
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
			</div>
		</div>
		<div class="content-right">Right<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
		</div>
</div>
</body>
</html>

ralphm · June 23, 2014, 1:33am

To be honest, it looks like a rather odd request. What are you trying to achieve there? There’s might be a better way to get the visual result you want without adding the extra div. If you want an innder div styled like that, it kind of makes the outer div redundant.

Fantastic5 · June 23, 2014, 1:34am

I’m trying do this:

ralphm · June 23, 2014, 1:38am

That image doesn’t really explain a lot, though. You already have a full height left column, so the sidebar background should go on that. Then just add in the content for that sidebar as needed.

Fantastic5 · June 23, 2014, 1:50am

I will try exaplain.
Atually i have this:

I want this:

When right content increase…left content increase too, the problem is that i have 2 divs in left content.

You can see my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CV Curriculum</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="content">
	<div class="content-left">
		<div class="top-content-left"></div><!--end top-content-left-->
		<div class="photo">
			<img src="images/photo.jpg" width="122px" height="167px" title="Nome" alt="Nome"/>
		</div><!--end photo-->
		<div class="bottom-content-left"></div><!--end bottom-content-left-->
		<div class="name">Jhon Doe</div><!--end name-->
		<div class="bottom2-content-left">
			<div class="designer">
				<div class="designer-title">Designer</div>
				<div class="designer-content">
					<ul>
						<li>Web</li>
						<li>Editorial</li>
						<li>Social Media</li>
						<li>Flash</li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
			<div class="address">
				<div class="address-title">Address</div>
				<div class="address-content"></div>
			</div>
			<div class="clear"></div>
			<div class="contact">
				<div class="contact-title">Contact</div>
				<div class="contact-content"></div>
			</div>
			<div class="clear"></div>
		</div>
	</div><!--end content left-->
	<div class="content-right">
		<div class="about">
			<div class="about-title">About Me</div><!--end about-title-->		
			<div class="about-text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae congue sem. Etiam non nisl ut ligula facilisis cursus quis sed eros. Praesent non augue ultricies turpis posuere dignissim ac non velit. Sed eget mauris purus, elementum aliquet erat. Suspendisse aliquam commodo nisl vel fringilla. Sed tempus neque pretium velit lacinia in ultrices felis sagittis. Vivamus nisi nisi, aliquam et fringilla semper, iaculis vel velit. Vestibulum pretium nibh a sapien sodales condimentum. Phasellus semper placerat arcu, a lobortis tellus consectetur a. 
				<br/><br/>
				Nam faucibus laoreet elit, commodo euismod mi consectetur at. 
			</div><!--end about-text-->
			<div class="clear"></div>
		</div><!--end about-->
		<div class="education">
			<div class="education-title">Education</div><!--end education-title-->
			<div class="education-text">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae congue sem. Etiam non nisl ut ligula facilisis cursus quis sed eros. Praesent non augue ultricies turpis posuere dignissim ac non velit. Sed eget mauris purus, elementum aliquet erat.
			<br/><br/>
			* SCHOOL - Vestibulum pretium nibh a sapien sodales
			   semper ( 1995 ) placerat arcu, a lobortis tellus
			<br/><br/>
			* UNIVERSITY - Nam faucibus laoreet elit, commodo euismod mi consectetur at. 
			   (2008)
			<br/><br/>
			* GRADUATE - Phasellus semper placerat arcu, a lobortis tellus
			</div><!--end education-text-->
			<div class="clear"></div>
		</div>
		<div class="experience">
			<div class="experience-title">Experience</div><!--end experience-title-->
			<div class="experience-text">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae congue sem. Etiam non nisl ut ligula facilisis cursus quis sed eros. Praesent non augue ultricies turpis posuere dignissim ac non velit. Sed eget mauris purus, elementum aliquet erat. <br/><br/>

			* DESIGNSHOCK - ( 2010 ) Vestibulum pretium nibh a sapien sodales
			   semper placerat arcu, a lobortis tellus <br/><br/>

			* ICONSHOCK-  (2008) Nam faucibus laoreet elit, commodo euismod mi consectetur at. 
			   Praesent non augue ultricies turpis  <br/><br/>
			   
			* THEMESHOCK - Phasellus semper placerat arcu, a lobortis tellus
			</div><!--end education-text-->
			<div class="clear"></div>
		</div>
	</div><!--end content right-->
	<div class="clear"></div>
</div><!--end content-->
<div class="clear"></div>
</body>
</html>

ralphm · June 23, 2014, 2:29am

I would advise you to rethink this. The main left column you have is perfect for placing the background color on the sidebar, including the shadow along the right. The only thing that’s tricky is the white border around the menu and the menu bg color. To be honest, I think it looks rather odd to have that extending all the way down with a lot of empty space. It would look a lot nicer to have that wrapping meatly around the menu, so I really don’t think it’s worth creating a hassle for yourself that is not really worth doing anyway.

greedyman · June 23, 2014, 7:05am

You can search google with this keyword “Faux Column”, I believe that it’ll help you resolve this problem

PaulOB · June 23, 2014, 9:44am

As Ralph said its quite a lot of effort for such a small effect but it can be done with smoke and mirrors.

It does mean that you have to plan carefully and rub the lines out where you don’t need them (at the top of the column) and may be complicated if you have multiple images but as a proof of concept it works.

Fantastic5 · June 23, 2014, 1:22pm

Thank you all. I’ll try.
Sorry for the inconvenience.

PaulOB · June 23, 2014, 2:51pm

It’s no trouble. I like fiddling around with code

Fantastic5 · June 24, 2014, 1:02am

When i need use “position: relative;” ? In what situations? I have some problems with position relative and absolute. I do not know when I should use.

ronpat · June 24, 2014, 4:11am

Try reading this reference (written by Paul) and see if it helps: http://reference.sitepoint.com/css/position

PaulOB · June 24, 2014, 12:17pm

You will very rarely use position:relative to move things around because elements moved via position:relative will always occupy their original space in the document but will appear to be somewhere else. Effectively the element is moved visually but not physically as far as anything else on the page is concerned. This means the element may overlap other elements because they don’t know that the element has been moved at all. Therefore you will only use this value when you want subtle overlapping effects and not usually for structural content elements.

The main uses of position:relative (without co-ordinates) are to either; a) allow a positioning context for absolute child elements as an absolute element is placed in relation to its nearest ancestor that has a position defined other than static (if none exist then the absolute element is placed from the viewport); or b) create a stacking context using z-index so that positioned elements can be stacked as required (i.e. determine which element is on top and which is underneath). Note that only positioned elements can have a z-index applied.

You would use absolute positioning in situations where the flow of the document will not be compromised by the use of absolute positioning. Absolute elements are removed from the flow of the page so you can’t have fluid height absolute elements that avoid each other as they will simply overlap. If you have a fixed height header then you could absolutely place a child on the right of the header (add position:relative to the header first as mentioned above) and that would be OK as long as the element is smaller than the fixed height header which by virtue of its height keeps the flow of the page under control. However imagine this absolute element was a fluid height box holding text then it would just grow and stick out of the header and overflow content on the page so would not be a suitable candidate for absolute positioning.

In reality most sites are made with mainly static elements and floats with a small smattering of absolute elements. Position:relative only being used for stacking and positioning contexts but rarely to move an element.

Fantastic5 · June 25, 2014, 1:48am

Thanks for your explanation, Paul.
I have two more question, it’s wrong to use negative values? Example: margin-right: -100px; left: -10px;etc…
How you know that code is compatible with IE? (tests the code?)

If you have interesting websites about css, i appreciate.
Sorry for the questions Paul, but i want learn more about css.

ralphm · June 25, 2014, 3:12am

Not wrong at all, but do that sort of think with care.

PaulOB · June 25, 2014, 7:49am

As Ralph said it’s not wrong when used in the right place but it is wrong when you are using to cover up errors or mistakes in the logic of the code. Many times negative margins will cause an overlap so if that’s what you want then its not wrong. If however you are applying a negative margin because you forgot that elements have default margins or padding to start with then you are doing it wrong.

How you know that code is compatible with IE? (tests the code?)

Yes testing is the best way to check. Grab the latest version of IE to test and if you have a spare or old computer or laptop then load a couple of earlier versions on those for testing or use a virtual machine from modernIE.