How can I code this layout???

**WoodiE55** · Sep 27, 2004 19:04

Forgive me for my mad photoshop skills, however I thought it's be best if I made my idea an image to better represent what I'm trying to do... I've attached a quick layout that I've made, but not sure what would be the best way to code a layout such as this. I'm not sure if tables or CSS would be better.

I can see how both would do well, however the way I'd like the text aligned I'm not sure which would be best or where to start and any pointers would be greatly appreciated.

Thanks,

-Michael

**AlexW** · Sep 27, 2004 22:14

Originally Posted by WoodiE55

Forgive me for my mad photoshop skills, however I thought it's be best if I made my idea an image to better represent what I'm trying to do... I've attached a quick layout that I've made, but not sure what would be the best way to code a layout such as this. I'm not sure if tables or CSS would be better.

I can see how both would do well, however the way I'd like the text aligned I'm not sure which would be best or where to start and any pointers would be greatly appreciated.

Thanks,

-Michael

It isn't tabular data so it shouldn't really be in a table. Of course, that hasn't stopped people before.

To me it looks like a pretty simple two column layout. Inside the right column you'll need to add a few adjusted styles to layout the button and price information.

I suggest starting with an established two column layout and start cutting!

http://css-discuss.incutio.com/?page=TwoColumnLayouts

**Paul O'B** · Sep 28, 2004 04:35

Hi Michael,

Heres a rough and ready example to get you going.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#left{
 float:left;
 width:200px;
}
#centre {
 margin-left:205px;
}
.image {
 width:180px;
 height:140px;
 color:#FFFFFF;
 background-color: #909090;
 margin-bottom:25px;
}
h1 {background:#ffffcc;margin:5px;padding:2px 0}
h2 {
 color:#000;
 background-color: #DBDBDB;
 margin:5px;padding:2px 0;
}
h2 span{
 font-size:small;
 float:right;
 width:5em;
 margin-top:.25em;
}
* html h2 span{font-size:x-small;f\ont-size:small}/* for ie5 and 5.5. that are one size out*/
#centre p.filler {width:70%}
form {margin:0;padding:0}
#centre input {float:right;margin-top:-45px}
</style>
</head>
<body>
<h1>Testing</h1>
<div id="left"> 
  <div class="image">Image</div>
  <div class="image">Image</div>
</div>
<div id="centre"> 
  <h2><span>$ PRICE</span>Title...</h2>
  <p class="filler">Filler text Filler Text Filler Text Filler Text Filler text 
	Filler Text Filler Text Filler Text Filler text Filler Text Filler Text Filler 
	Text Filler text Filler Text Filler Text Filler Text Filler text Filler Text 
	Filler Text Filler Text Filler text Filler Text Filler Text Filler Text </p>
  <form id="form1" method="post" action="">
	<p> 
	  <input type="submit" name="Submit" value="Subscribe" />
	</p>
  </form>
  <h2><span>$ PRICE</span>Title...</h2>
  <p class="filler">Filler text Filler Text Filler Text Filler Text Filler text 
	Filler Text Filler Text Filler Text Filler text Filler Text Filler Text Filler 
	Text Filler text Filler Text Filler Text Filler Text Filler text Filler Text 
	Filler Text Filler Text Filler text Filler Text Filler Text Filler Text </p>
  <form id="form2" method="post" action="">
	<p>
	  <input type="submit" name="Submit" value="Subscribe" />
	</p>
  </form>
  <h2><span>$ PRICE</span>Title...</h2>
  <p class="filler">Filler text Filler Text Filler Text Filler Text Filler text 
	Filler Text Filler Text Filler Text Filler text Filler Text Filler Text Filler 
	Text Filler text Filler Text Filler Text Filler Text Filler text Filler Text 
	Filler Text Filler Text Filler text Filler Text Filler Text Filler Text </p>
  <form id="form3" method="post" action="">
	<p>
	  <input type="submit" name="Submit" value="Subscribe" />
	</p>
  </form>
</div>
</body>
</html>

(For info on ie's 3 pixel jog on static content next to floats then look at the FAQ on floats which explains how to overcome this.)

Hope this helps anyway

Paul

**WoodiE55** · Sep 28, 2004 19:26

AlexW - thank for the link, I'm looking at it now.

Paul B - Man that will do VERY well and here I thought I'd have to use tables, THANKS! Now I'm gonna see about making it work for FireFox as well, but this gets me more then started - THANKS!

-Michael

User Tag List

Thread: How can I code this layout???

Thread Tools

Display

How can I code this layout???

Bookmarks

Bookmarks

Posting Permissions