Simple 4 Box Layout

bluemeany · #1 Nov 29th, 2006, 11:31

I've been trying to do a 4 box div layout for days, but have given up on it and resorted to using a table. However, the table still causes me problems as the width I apply to the square boxes (labeled 1 and 2) does not take effect.
Can anyone get this layout to work with either divs or tables?

HTML: Select all

 
<html>
<head>
   <style>
      td { border: 1px dotted red; }
      .square { width: 50px; height: 50px; ]
   </style>
</head>
<body>
   <table>
      <tr>
         <td colspan="2">this is variable length text</td>
         <td class="square" rowspan="2">1</td>
      </tr>
      <tr>
         <td class="square" rowspan="2">2</td>
      </tr>
      <tr>
      <td colspan="2">this is some more variable length text</td>
      </tr>
   </table>
</body>
</html>

drd · #2 Nov 29th, 2006, 14:18

Can you show us your original CSS one - would be nice to avoid tables if this is a layout.

bluemeany · #3 Nov 29th, 2006, 14:52

Yes here it is, but it has some problems. The layout stretches as the top line of text gets longer (as it is meant to), but does not stretch with the bottom line of text

Also this layout depends on using exact margin sizes. This means changing the font size will screw up the layout - not good!!

HTML: Select all

[left]<html>
<head>

<style>
body { background: #fff; }
div { border: 1px dotted red }
.menu { background: #ffe; font: 10px arial; height: 100px;}
.menuLinks1 { float: left; }
.menuLinks2 { float: left; margin-top: 35px; }
.menuPicture1 { width: 50px; height: 50px; background: #efe; float: left; }
.menuPicture2 { width: 50px; height: 50px; background: #eee; float: left; }
.bottomBlock { float: left; clear: left; margin-top: -37px; }
</style>

</head>

<body>

<div class="menu">
<div class="topBlock">
<div class="menuLinks1">
this is variable length text
</div>
<div class="menuPicture1">
1
</div>
</div>
<div class="bottomBlock">
<div class="menuPicture2">
2
</div>
<div class="menuLinks2">
this is some more variable length text
</div> 
</div>
</div>

</body>[/left]
</html>

Accurax · #4 Nov 29th, 2006, 18:44

can u give us a link to something visually similar to what ur trying to acheive?

Is it a 3 column layout with a header accross the top??

bluemeany · #5 Nov 30th, 2006, 07:55

Like this, with the long thin boxes containing text.

As the text length increases in the top thin box, the box should stretch to fit the text, the righthand square should be pushed to the right and the bottom thin box should stretch so it's right edge keeps in line with the right edge of the righthand square. If the text in the bottom thin box is longer than the text in the top thin box, the right edge of the top thin box should stretch so it's right edge keeps in line with the left edge of the righthand square.

Basically the text should never wrap, the square boxes should remain the same size and the whole thing should remain a rectangle.

It seems a simple layout, but I'm not sure it's possible without very conveluted CSS.

Daniel · #6 Nov 30th, 2006, 08:42

simple

lets have a look

Accurax · #7 Nov 30th, 2006, 10:09

Quote:

Originally Posted by bluemeany

Like this, with the long thin boxes containing text.

As the text length increases in the top thin box, the box should stretch to fit the text, the righthand square should be pushed to the right and the bottom thin box should stretch so it's right edge keeps in line with the right edge of the righthand square. If the text in the bottom thin box is longer than the text in the top thin box, the right edge of the top thin box should stretch so it's right edge keeps in line with the left edge of the righthand square.

Basically the text should never wrap, the square boxes should remain the same size and the whole thing should remain a rectangle.

It seems a simple layout, but I'm not sure it's possible without very conveluted CSS.

From your discription it sounds like what your trying to create will result in horizontal scroll bars on your webpage if the content ever grew enough, since your text isnt wrapping.

bluemeany · #8 Nov 30th, 2006, 10:37

Not really. I'm trying to make a menu like this. The links will change so it can't be fixed width. The boxes will contain images.

drd · #9 Nov 30th, 2006, 13:13

hmmmm.
So it sounds like its going to be fluid?

Well, I'd put all those divs in a container set to position relative to keep them together. Then Id position absolute the square divs and give the menu divs a margin on the left and right (top one right, bottom one would have left margin) so they dont go over/under the position absolute divs. Then the menu divs dont need a set width so can expand when menu items are added.

Will require some fettling probably to get it to work, but I based that idea on a fluid layout here:
http://www.glish.com/css/7.asp
Ignore the voice-family box model hacks.

Tell me if I've misunderstood!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] simple layout problem	saltedm8	Web Page Design	13	May 2nd, 2008 18:02
CSS Layout Issue (in Firefox only)... probably simple but its driving me crazy!	alfandango	Web Page Design	4	Mar 8th, 2008 17:11
Just want simple Background Song (.mp3) and a simple start/stop.	BlackReef	Flash & Multimedia Forum	4	Jun 28th, 2007 07:04
Fluid layout - IE6 clichés the layout when resizing	cyberseed	Web Page Design	7	Jun 16th, 2007 05:14
Help needed to slice a site (Simple layout)	shorn	Starting Out	1	Apr 23rd, 2007 12:43

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Simple 4 Box Layout