div column help

theone · May 18, 2011

Hello I am trying to make a webpage without using tables. However i need 2 colums with the first having text and the second pictures.

As of right now the pictures in the second column affect the text position in the first.

How can I properly set this up?

I also know its because of the css display: table-cell;

html code

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" />
<meta name="Description" content="" />
<title>Yoga Lotus</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="base"> 
<div id="container">
    <div id="row">
      <div id="LeftTXTBox">
        <h4>Middle Col</h4>
        <p>Lorem ipsum dolor sit Aene id quam. Sed neq</p>
      </div>
      <div id="rightCol"><img src="/images/box.jpg" alt="Floating" width="260" height="200" class="IMG" />
      <img src="/images/relax-box.jpg" alt="Pose" width="260" height="200" class="IMG" /></div>
    </div>
  </div>
  <div id="footer"> <a href="#">home</a> <a href="#">act</a> <a href="#">sch</a> <a href="#">scribe</a> <a href="#">statement</a> </div>
  <div id="subFoot" align="center"> setup box </div>
</div>
</body>
</html>

css

Code:

@charset "UTF-8";
/* CSS Document */
#base {
	clear:left;
	z-index:2;
	position:relative;
	width:90%;
	height:489px;
	margin:0 auto;
}
#container {
	z-index:3;
	max-width:1100px;
	padding:0;
	border: 1px solid black;
	width: 90%;
	margin: auto;
	display: table;
}
#row {
	display: table-row;
}
#rightCol {
	width:266px;
	background:#FEE;
	padding:1em;
	display: table-cell;
}
#LeftTXTBox {
	padding: 1em;
	display: table-cell;
	max-width:1000px;
	min-width:521px;
	background-color:#ebead5;
}
.bottomPanel {
	margin-top:5px;
	width:259px;
	height:196px;
}

.IMG {
	text-align:center;
	padding:1em;
}
#dynFooter a {
	text-decoration:none;
	color:white;
}
#subFooter {
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	font-weight:bold;
	color:#60635b;
}
body {
	background-color:#C1FFFF;
	background-image:url(/yoga/images/background.png);
	background-position:center top;
	background-repeat:no-repeat;
	font-family:Arial, Helvetica, sans-serif;
}
/*Start Footer Nav bar*/

#footer {
	text-align:center;
	margin-top:15px;
	margin-bottom:15px;
}
#footer a {
	display:inline-block;
	text-decoration:none;
	text-transform:uppercase;
	color:#60635b;
	padding:5px;
}
#footer a:hover {
	font-weight:bold;
}
#dynFooter {
	margin-top:5px;
	height:33px;
	padding-top:18px;
	padding-left:15px;
	padding-right:15px;
	font-size:14px;
	color:white;
	font-weight:bold;
	overflow:hidden;
}

Pheno · May 18, 2011

Hi theone,

not sure exactly what you want the text to look like on the left, but what you could try is removing the display:table-cell and instead use float:left on both columns. Then use the width property to arrange it how you want it.

notarypublic · May 18, 2011

I haven't read this particular tutorial, but I know the content is fairly standard. I was in your shoes not all that long ago, and you're making it harder for yourself by thinking about things still in terms of tables. There are no more rows! Things just naturally flow around and below each other. It's very fluid, and once you get it down, a refreshing change.

Best of luck! Ask questions if it doesn't make sense

ronaldroe · May 18, 2011

Here's a very basic example of what I think you're trying to do:

HTML:

Code:

<img class="right" src="images/image.png" alt="" />
<img class="right" src="images/image.png" alt="" />
<p>Some text</p>

CSS:

Code:

.right{float:right;}

This will cause the images to float to the right and the text to flow next to them. Then, if the text is longer than the column of images, it will flow around it. Make sure, I repeat, make sure the images come before the text in your HTML, or it won't work properly.

div column help

theone

New Member

Pheno

New Member

notarypublic

New Member

ronaldroe

Super Moderator