Stuck on complex Css Layout

[quiquedcode]

Hi guys
I've started learning developing css layouts (tableless), and begun converting an image of a template
Please Look


I've uploaded the files I've done so far, because I'm having a little problem and I'm stuck in the structure of the top zone...

http://www.4shared.com/dir/9984713/9...0/sharing.html
(compressed.zip)

1- You're free to modify the whole structure, code at your wish, but I mainly need to add the top horizontal navbar and the image of the doctor at the top zone...

2- Should I use float and clear properties?

Thanks a lot in advance,

[Arlen]

Looks like a good start. I don't see the "stuck" part.

As for floats/clears: I avoid them where possible because floated designs seem too fragile to me. You get caught with peek-a-boo bugs, and what happens when the browser window isn't what you'd like it to be? Especially when seen in IE6. (I always keep a copy of IE6 around to test floated designs in, as that browser will destroy most of them on contact.)

For the top section I'd use a judicious mix of position relative and position absolute, as most of that area seems to be fixed sizes due to the graphics. The middle section looks like a standard two-column deal, which you could do either with floats or a combination of absolute and relative positioning (possibly with a little javascript mixed in: see Shaun Inman's description for details). My preference would be for positioning with the Inman javascript added, but floats with an added clear would also work. The footer section looks fairly straightforward as well.

Dan Cederholm's "Web Standards Solutions" is a good source for the techniques I've talked about here. For that matter, check out Andy Clarke's "Transcending CSS" for another.

(Hopefully I've given you enough to work it out for yourself; if not, feel free to ask for more help.)

[quiquedcode]

Hi Arlen
Thanks for helping.

The stuck part can be seen directly in the files. I'm stuck on the top right part, I must add a wrapper div with 2 divs inside, for adding the top right navbar, and the doctor image (or other content)

Could you give me the links for Dan Cederholm's "Web Standards Solutions" and Andy Clarke's "Transcending CSS" ? are these books, articles ?

I'm very newbie with css layouts, so well, any help is welcome. Thanks again

[Tailslide]

Actually I have to disagree - floats are by far the most reliable way to position bits of a page. Absolute positioning works... but it can make a page very fragile. For example, if the user increases the size of the text then the page may well break.

Javascript definitely has it's uses but it's not necessary for this application.

Float bugs aren't hard to get around to be honest.

[quiquedcode]

Tailslide
What would you recommend me then? Can you help me with a little quickstart modding to the files I've pointed so I can learn the way you say?
As far I've read in google, I think the floats are the most used, but well...

[Tailslide]

Unfortunately I can't go through your file at the moment (trying to cook and post at the same time!). But basically, for the top half of the page you want a wrapper div with two inner divs floated left and right - or both left to get around IE's float dropping behaviour. Same end look either way.

The within the left hand div you've got your logo and the vertical nav list (make background colour the dark grey so that the nav can expand). I'd use an accessible image replacement technique for the logo.

In the right-hand div you've got the horizontal nav and the image (the image could be a background image if you prefer).

[quiquedcode]

This is something I wish to learn more about , I will keep tabs on this thread.

so true
I've learned java, php, complex frameworks, css (common properties, hacks, etc.) but making complex layouts tableless is something that makes me become nuts

[Dark Tranquility]

I didn't have the time to look at your files but I would use relative positions for the div with float to the right or the left ... and try to be precise while setting the width/height of the divs...Is this how you proceeded?

[quiquedcode]

I didn't have the time to look at your files but I would use relative positions for the div with float to the right or the left ... and try to be precise while setting the width/height of the divs...Is this how you proceeded?

No
I just use width/heights, but I don't use relative positioning... I'll try again from scratch

[quiquedcode]

I've decided to start again from scratch, after googling and reading some pages, and got a result, but, my problem now is that I need some divs to adjust automatically to the height of its neighbours divs



Files
http://www.4shared.com/dir/10005997/...ss_layout.html

All the code in just one file

<!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=iso-8859-1" />
<title>Tableless Design</title>

<style type="text/css" media="screen,projection">

/* ====================================================== */
/* Styles for Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100&#37;;
     font-family: inherit;
     vertical-align: baseline
}

body {
     line-height: 1
}

:focus {
     outline: 0
}

ol, ul {
     list-style: none
}

table {
     border-collapse: collapse;
     border-spacing: 0
}

blockquote:before, blockquote:after, q:before, q:after {
     content: ""
}

blockquote, q {
     quotes: "" ""
}

input, textarea {
     margin: 0;
     padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

/* ====================================================== */
/* Styles for LAYOUT */
div#main_wrap {
	width:900px;
	margin:0 auto;
	background-color:#FFFFFF;
	padding:4px;
	overflow: hidden;
}

div#top_wrap {
	background-color: fuchsia;
	padding: 4px;
	overflow: hidden;
}

div#top_left_wrap {
	background-color:#5ed85f;
	width: 25%;
	float: left;
	padding: 4px;
}

div#logo {
	background-color:#b44747;
	color:white;
	height:125px;
}

div#left_nav {
	background-color:#87cefa;
	color:white;
	height:225px;
}

div#top_right_wrap {
	background-color: orange;	
	width: 73%;
	float: right;
	padding: 4px;
}

div#top_navbar {
	background-color: aqua;
	padding: 4px;
	height:60px;
}

div#top_content {
	background-color: #696969;
	color: white;
	padding: 4px;
	margin-top: 5px;
	height: 170px;
}

div#middle_wrap {
	background-color: #ffe4b5;
	padding: 4px;
	margin-top: 4px;
	overflow: hidden;
}

div#main_content {
	background-color: #9acd32;
	padding: 4px;
	float: left;
	width: 70%;	
	font-size: 12px;
}

div#right_col {
	background-color: #c8d9f9;
	padding: 4px;
	float: right;
	width: 28%;
	height: 200px;
}

div#footer_wrap {
	background-color: aqua;
	padding: 4px;
	overflow: hidden;
	margin-top: 4px;
	clear: both;
}

div#footer_left {
	background-color: #a294f3;
	padding: 4px;
	float: left;	
	width:20%;
}

div#footer_content {
	background-color: #cd5c5c;
	padding: 4px;
	float: right;	
	width:78%;
}
</style>

</head>
<body>
	<div id="main_wrap">

		<div id="top_wrap">
			<div id="top_left_wrap">
				<div id="logo">LOGO</div>
				<div id="left_nav">LEFT NAV</div>
			</div>			
			<div id="top_right_wrap">
				<div id="top_navbar">TOP NAVBAR</div>
				<div id="top_content">TOP CONTENT</div>
			</div>
		</div>

		<div id="middle_wrap">
			<div id="main_content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla quis massa ut ligula porttitor fermentum. Donec lectus urna, volutpat tristique, ultricies ac, vehicula vitae, elit. Curabitur fermentum faucibus nunc. Morbi vehicula, urna nec sollicitudin semper, diam turpis aliquet mi, et congue elit orci eu ipsum. Proin tincidunt, quam ut scelerisque imperdiet, mi nisl cursus sem, a sodales metus pede ac mauris. Aliquam erat volutpat. In congue dui et enim. Nullam consequat. Nullam at justo vitae erat malesuada sagittis. Suspendisse pede nibh, tempor eget, varius at, convallis ut, leo. Sed pharetra pulvinar elit. Nulla sagittis tincidunt tortor. Integer ac lectus ut arcu consequat consectetuer. Vivamus in lorem. Mauris tempus hendrerit neque. Aenean tristique volutpat risus. Sed sit amet enim volutpat arcu auctor dignissim. Ut vel odio ut magna lacinia viverra. Praesent sit amet turpis in purus fringilla tincidunt. 
			</div>			
			<div id="right_col">
				RIGHT NAVBAR
			</div>
		</div>
		
		<div id="footer_wrap">
			<div id="footer_left">LEFT FOOTER</div>
			<div id="footer_content">FOOTER CONTENT</div>
		</div>
		
	</div>
</body>
</html>

[igmuska]

I have seen complex layouts using only floats that are xhtml strict compliant. As this is my first post, I can't provide link to the information. To see an excellent demo of complex css float layout, google "The Perfect Multi-Column Stacked Liquid Layout" by Mathew James Taylor.
Although I have only coded one css layout using his techniques, his design simplicity helped me understand document flow better. From his example you can easily use positioning and floating to solve your layout questions.

[Dan Schulz]

Henry, are you still planning on using that image in the first mockup with your design? (By the way, it would help me immensely if you could put up a live demo, rather than just files - I'll be able to "see" what you're trying to accomplish better, not to mention faster.)

[quiquedcode]

Hi guys
I've tried finally doing the layout with divs, fixed widths and heights, some float, and well, here is what I've got... I think it got good (look) ...

http://img206.imageshack.us/img206/8950/captura1pu2.jpg

PS: I can't provide live url, because it is an intranet, internal use and uploading entire framework would be 1 day loss

Thanks 2 every1 4 helping !!