4 replies [Last post]
pmnagel
pmnagel's picture
Offline
newbie
Last seen: 2 years 15 weeks ago
Timezone: GMT-5
Joined: 2011-12-26
Posts: 10
Points: 12

Hi Guys, please help:
I have a basic layout using div tags with CSS. There's a header, a footer, with a left and right column in between. The left and right columns each have 3 stacked divs that should stay together, even if the height of the div tags change...

I'm having difficulty with the floating and clearing options to maintain the structure.

Here's the code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Floating Problem</title>
<style type="text/css">
#body {
	background-color: #CCC;
}
#wrapper {
	background-color: #999;
	width: 800px;
	position: relative;
}
#header {
	background-color: #CCF;
	height: 100px;
	width: 800px;
}
#left_A {
	background-color: #FCC;
	float: left;
	height: 50px;
	width: 200px;
	margin-top: 10px;
}
#right_A {
	background-color: #3C9;
	float: left;
	height: 50px;
	width: 590px;
	margin-left: 10px;
	margin-top: 10px;
}
#left_B {
	background-color: #F99;
	float: left;
	height: 500px;
	width: 200px;
}
#right_B {
	background-color: #096;
	float: left;
	width: 590px;
	margin-left: 10px;
	height: 500px;
}
#left_C {
	background-color: #F66;
	float: left;
	height: 50px;
	width: 200px;
	margin-bottom: 10px;
}
#right_C {
	background-color: #060;
	float: right;
	height: 50px;
	width: 590px;
	margin-bottom: 10px;
	margin-left: 10px;
}
#footer {
	background-color: #6CF;
	height: 80px;
	width: 800px;
	clear: both;
}
</style>
</head>
 
<body id="body">
<div id="wrapper">
  <div id="header">Header (Width: 800 Height: 100)</div>
  <div id="left_A">Left A (Width: 200 Height: 50)</div>
  <div id="right_A">Right A (Width: 590 Height: 50)</div>
  <div id="left_B">Left B (Width: 200 Height: Based on content)</div>
  <div id="right_B">Right B (Width: 590 Height: Based on content)</div>
  <div id="left_C">Left C (Width: 200 Height: 50)</div>
  <div id="right_C">Right C (Width: 590 Height: 50)</div>
  <div id="footer">Footer (Width: 800 Height 80)</div>
Content for  id "wrapper" Goes Here</div>
</body>
</html>

Currently the "Left B" and "Right B" tags are set to a 500px height. These containers will eventually change height based on the amount of content. When they do change height, my goal is for their corresponding containers underneath (Left C and Right C)to stay in their positions (underneath Left B and Right B respectively).

Your help is greatly appreciated.
Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9048
Points: 3017

If I understand you

If I understand you correctly, you want the left and right members of each pair to remain aligned with one another.

If so, instead of two columns, structure as rows with 2 columns each.

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Test document</title>
  <style type="text/css">
    .rowbox {
      overflow: hidden;
      }
 
    .columnboxa {
      float: left;
      margin: 0 1%;
      width: 48%;
      }
 
    .columnboxb {
      margin: 0 1%;
      overflow: hidden;
      }
 
  </style>
</head>
 
<body>
  <div class="rowbox">
    <div class="columnboxa">
      <p>...</p>
    </div>
 
    <div class="columnboxb">
      <p>...<br />
      ...<br />
      ...</p>
    </div>
 
    </div>
  </div>
 
  <div class="rowbox">
    <div class="columnboxa">
      <p>...<br />
      ...<br />
      ...</p>
    </div>
 
    <div class="columnboxb">
      <p>...</p>
    </div>
  </div>
 
  <div class="rowbox">
    <div class="columnboxa">
      <p>...</p>
    </div>
 
    <div class="columnboxb">
      <p>...</p>
    </div>
  </div>
</body>
</html>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

pmnagel
pmnagel's picture
Offline
newbie
Last seen: 2 years 15 weeks ago
Timezone: GMT-5
Joined: 2011-12-26
Posts: 10
Points: 12

Vertical Columns

Thanks for the help Gary,

It seems that your solution changed the layout to horizontal rows, instead of vertical columns. The left side's A, B and C divs need to stay together, and the Right side's A, B and C divs need to stay together, even though any of the left or right side's "B" containers change in height...

The code renders some colors that matches in a browser.

Looking forward to your response.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9048
Points: 3017

OK, if this isn't it, you'll

OK, if this isn't it, you'll need to provide twenty seven eight-by-ten color glossy pictures with circles and arrows and a paragraph on the back of each one …

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Test document</title>
  <style type="text/css">
 
    #columns {
      overflow: hidden;
      }
 
    .columnboxa {
      float: left;
      margin: 0 1%;
      width: 48%;
      }
 
    .columnboxb {
      margin: 0 1%;
      overflow: hidden;
      }
 
    div div {
      border: 1px solid black;
      }
 
  </style>
</head>
 
<body>
  <div id="columns">
    <div class="columnboxa">
      <div>
	<p>left-a ...</p>
      </div>
 
      <div><p>...<br />
	  ...<br />
	  ... left-b</p>
      </div>
 
      <div><p>...<br />
	  ...<br />
	  ... left-c</p>
      </div>
    </div> <!-- end columnboxa -->
 
    <div class="columnboxb">
      <div>
	<p>...<br />
	  ...right-a</p>
      </div>
 
      <div>
	<p>...<br />
	  ... right-b</p>
      </div>
 
      <div>
	<p>... right-c</p>
      </div>
    </div>
  </div>
<p>And another bit of text to show float element is contained.</p>
</body>
</html>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

pmnagel
pmnagel's picture
Offline
newbie
Last seen: 2 years 15 weeks ago
Timezone: GMT-5
Joined: 2011-12-26
Posts: 10
Points: 12

Thanks

Thanks. I have learned.