3 replies to this topic

[StubbyD]

In my quest to expand my knowledge and possibly improve my website I have taken to playing with DIVs.

I seem to have managed a number of basic things but am struggling with a particular variant. What I have managed is to create a number of DIVs atop one another in a centred floating (??) format and now I want to add an additional DIV that sits alongside another yet everything remains centred on the screen and the side by side DIVS remain within the overall constraint of DIV1

So this sort of thing

D I V 1
DIV2 DIV3
D I V 4

Whatever I try I get this instead:

D I V 1
DIV2
DIV3
D I V 4


Am I trying to do the impossible or am I jsut being a bit dense?

Edited by StubbyD, 01 June 2007 - 08:43 PM.

[Will0wz]

<table width="67%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
	<td colspan="2" align="center" valign="bottom"><div> 
	  <div align="center" style="background-color:#00CCFF">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>DIV 1</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	  </div>
	</div></td>
  </tr>
  <tr>
	<td align="center" valign="bottom"><div> 
	  <div align="center" style="background-color:#ffCCFF">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>DIV 2</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	  </div>
	</div></td>
	<td align="center" valign="bottom"><div> 
	  <div align="center" style="background-color:#ffCCFF">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>DIV 3</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	  </div>
	</div></td>
  </tr>
  <tr>
	<td colspan="2" align="center" valign="bottom"><div> 
	  <div align="center" style="background-color:#00CCFF">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>DIV 4</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	  </div>
	</div></td>
  </tr>
</table>

Try that mate

[Case]

Avoid tables at all costs, they are for displaying tabular data and a layout is definitely not tabular data.

You need to use the float command:

#div1 {
position: absolute/relative/fixed (you choose);
float: left;
width: 100%;
}

#div1 {
position: absolute/relative/fixed (you choose);
float: left;
width: 49%;
}

#div3 {
position: absolute/relative/fixed (you choose);
float: left;
width: 49%;
}

#div4 {
position: absolute/relative/fixed (you choose);
float: left;
width: 100%;
}

Without playing around with it I cant remember which position type to use so just mess around with it. If you want something to compare to you can find a database of CSS styles like that on http://www.dynamicdr.../style/layouts/

[StubbyD]

Thank you both - that's a great help.