14 replies [Last post]
xxangel
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

I'm trying to do something like this image:

I can do it all tableless, except I have to define the widths. I, however, want this layout to be fluid, therefore I need help.

What I'm trying to do is have the dark blue have a fixed width(the part on the left). Let's say, 106px in width. The gray and light blue on the right (the two boxes on the right) will grow or shrink depending on the resolution of the computer. Also, in the light blue, there are left and right sections (but, I don't think that would really play a big part in this).

Anyway, whenever I do the coding, I have to define the width of the right and left floats (I'm using floats) or else the browser thinks I have both set at 100% so one of the floats gets pushed down.

Does anyone have any idea what I can do?

This is my coding thus far:

Avatar
Date
QOptions
Text

div.main {
	background: #FFFFFF;
	font-family: tahoma;
	padding: 5px;
	}

div.avieleft {
	float: left;
	width: 106px;
	}

.avie {
	border: 1px solid #BFD0D9;
	padding: 3px;
	background: #FFFFFF;
	}

div.rightpost {
	width: 87%;
	float: right;
	}
	
div.date {
	font-size: 0.75em;
	color: #7B909B;
	float: left;
	}

div.options {
	float: right;
	font-size: 0.75em;
	color: #44687B;
	}

div.post {
	font-size: 0.8em;
	margin-top: 1em;
	}

As you see, I have to define my right post as 87%, but this would change due to different resolutions (but since I set it as 87, there would be a gap of space in wider resolutions). Any help is appreciated!

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

try width: 100%;

try width: 100%;

As a rule, I never touch anything more sophisticated and delicate than myself

xxangel
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

...? That doesn't make any

...? That doesn't make any sense, because it would cause the right float to be pushed under the left float because it can't support that width (there isn't enough space). Anything more than 87%, the post gets pushed underneath.

I want something similar to this forum (fluid expansion of the content area)

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 12 years 30 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

hello, something like that

hello, something like that ?
HTML 4.01

body , html {height:100%;margin:0;padding:0;overflow:hidden;
background:#ddd;font-size:100%;}
div.main {
background: #8DA4B0;
font-family: tahoma;

height:100%;
overflow:auto;

}

div.avieleft {
float: left;
width: 106px;
height:100%;
background: #456;
_margin-right:-3px;/* 3 pixel-jog IE */

}

div.rightpost {

background:#eee;
min-height:3em;
_height:3em;
}

div.date {
font-size: 0.75em;
color: #7B909B;
float: left;
padding-left:1em;
}

div.options {
float: right;
font-size: 0.75em;
color: #44687B;
padding-right:1em;

}

div.post {
font-size: 0.8em;
padding:1em;
overflow:auto;
display:inline-block;
}



Avatar


LEFT

RIGHT


Text

But it has a few limits , the flotting element will be 100% of the viewport.
that might be a start Smile .

GC

xxangel
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Thanks for the code, but I'm

Thanks for the code, but I'm not trying to make the entire window what I specified. Rather, this is part of a forum template I'm trying to code (into tableless css). So, what I'm specifying is what each post would look like, and I don't think it would work with the height: 100% Sad

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Remove the float property

Remove the float property and the width from the right section and give it a left margin the width plus a little extra of the left column.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 12 years 30 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

back with my basic code and

back with my basic code and idea , there is something to let expand itself.
a bit more html , to look like a forum base , and the heights 100% off with a couple of overflow not needed anymore.
HTML 4.01

p {margin:0;}

body , html {
margin:0;padding:0;
background:#ddd;font-size:100%;
}
div.main {
font-family: tahoma;
}

p.avieleft {
float: left;
width: 106px;
background: #456;
_margin-right:-3px;/* 3 pixel-jog IE */

}
div.rightpost {
background:#eee;
overflow:auto;
_display:inline-block;/* haslayout IE */
}

p.date {
font-size: 0.75em;
color: #7B909B;
float: left;
padding-left:1em;
}

p.options {
float: right;
font-size: 0.75em;
color: #44687B;
padding-right:1em;

}

p.post {
font-size: 0.8em;
padding:1em;
margin-left:106px;
background:#8DA4B0
}

Avatar

LEFT

RIGHT

Text

Avatar

LEFT

RIGHT

Text

underscore are for IE , the best is to use conditionnal comment and check that IE7 might not need them .

I kept the color of your image , the overflow or display:inline-block is to hold the floating elements , I turn the thing from a whole container to containers to pile on each others , the basic coding idea is the same.

GC

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

If you're going to use

If you're going to use inline-block, you may as well use zoom. Both were added in IE5.5 and zoom doesn't need to be hidden from any other browser. Use width or height if you want your design to work with IE5.0.

I don't know what I've done, but this page doesn't suffer from 3px jog (at least not in my IE6).

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 12 years 30 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

hello I don't know what

hello Smile
I don't know what I've done,
Well , the margin-left:120px; to .main , seems to not show it , but it is there Smile, put (margin:0; to see it)

Depends on what you are looking for , a 3pixels gasp within a graphic design or no gasp.

Display:inline-block; (for floatting elements aside) works for other browsers as well than overflow:hidden; (not ff) .
BUT it needs to have enough content to reach right border , wich is most of the time the case , if there is no border a background to give to that element , then there is no need to hide it , it will expand with no problems.

Well i guess he has now enough elements to build his template.

Cheers
GC

xxangel
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Thanks everyone for the

Thanks everyone for the help! I've figured out this problem--I used the suggestion about the margin-left and no floats and it worked very well!

But now, I have another question. Is there a way to make the message index tableless as well? Now, what I'm saying is something like:

I tried doing the margin method, but it doesn't work with 4 divs (even though I did all of them float: left). What I have is

Icon
Topic
Replies
Views

div.icon {
	float: left;
	width: 50px;
	text-align: center;
	}

div.topic {
	float: left;
	width: 70%;
	margin-left: 60px;
	}

div.replies {
	width: 5%;
	margin-left: 70%;
	}

div.views {
	float: right;
	width: 5%;
	}

Is this even possible?

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 12 years 30 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

hello again, i would do

hello again,

i would do like this :

XHTML 1.0 Strict

div.main {
/* to hold floattings element IE and others */
display:table;
width:100%;
/* ... */
margin-top:5px;
background:#def;/* to see extending */

}
body {
padding-left:60px;
}
div.icon {
float: left;
width: 50px;
text-align: center;
background:#789;
margin-left:-55px;
position:absolute;/* opera ! (IE as well where relative is enough) */
}

div.topic {
float: left;
width: 70%;
margin-right:5px;
background:#abc;
}

div.replies {
width: 14%;
background:#bcd;
display:table;
dispaly:inline-block;
}

div.views {
float: right;
width: 15%;
background:#cde;
}

Icon
Topic
Views
Replies
Icon
Topic
a bit longer to show that "div.main" extends .
Views
Replies
Icon
Topic
Views
Replies

Some other "point of view" ,would be very interresting Smile .

i removed the spacer , maybe i don't like them , just kidding !

GC

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Sure its possible. Two

Sure its possible. Two things.

- I wouldn't have things like, icon, replies and views as % width. They should be fixed width.

- Its a TABLE !!!

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 12 years 30 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

, i didn't dare , from the

Smile , i didn't dare , from the beginning that the best for a forum was a table !!!!!!

I thought it was a good exercise Smile

++ , no i am not playing around, and i believe it was not useless .

GC

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I think a thread - showing

I think a thread - showing individual posts - is reasonably displayed as a list of posts. I guess when viewing a forum and its threads, you can consider it a list of threads. However, once you start adding in lots of associated information (views, replies, etc), its a table.

It is a good exercise though. Smile

xxangel
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Thanks for the help everyone

Thanks for the help everyone Smile