Liquid CSS 3 column Header Layout - fixed, liquid, fixed

**sreilly24590** · 11-01-2012, 03:23 PM

Hello,

I'm new to this forum and eager to learn. I've written several websites over the years and none that were anything close to web standard compliant. They were designed using MS FrontPage utilizing many tables, nested tables, and then more tables. It's a HTML mess. While the content is solid, the site needs a serious overhaul and re-write. I've taken several online classes through Ed2go through my local community college that cover the basics of Dreamweaver CS5 and then intermediate HTML and CSS. I plan to continue with the intermediate HTML & CSS class after an upcoming total knee replacement surgery. At least after I no longer need the pains meds and can concentrate better.

In the meantime, my pressing issue is creating my templates needed to get this re-write done. Where I am at this point is stuck. The header I envision would use three images I created in Photoshop. The first is the left column (fixed width of 330px) with my observatory name and coordinates, the right column is an image of fixed width of 300px. The center column would be liquid, if possible, allowing the left and right pictures to remain in their positions and the center image, title of the website with shadow and bevel affects, to remain center of the two columns regardless of monitor resolution. I would set the minimum width to 1024 and maximum to 100%. Height would be fixed at 200px. Actual dimensions of the images used are: left - 330x200px right - 300x200px center - 450x120px. I could remake that center image giving it a 200px height placing the text where I want it aligned if that makes it any easier. Is this possible or even practical? I should mention that I can easily do this using tables but I am trying to 1) learn the proper technique 2) be standards compliant.

As far as scripts go, if it's in DW CS5 I may have played with them and they would have been Javascript most likely. I'm no web designer. I am a retired HVAC tech that specialized in computer controlled zoning systems for home and commercial buildings. I build my own Windows based computer systems so hardware wise I'm pretty proficient. I'll be re-writing my church's website after completing mine. Hopefully I'll learn a good deal more doing mine first but they are totally different in design. I think the church site is actually much easier and a lot smaller overall.

Thanks for reading.

-Steve

**sreilly24590** · 11-02-2012, 04:45 PM

I've uploaded a screenshot of what I'm trying to do but not the html as this is only an example of the layout I'm trying to get using CSS <div> tags. Or maybe there's a better tag to use? The header is the issue with it's three columns and making it a fluid design. What I didn't do in the example is give any padding or margins so it does butt right up against the monitor edge. This is not a finished layout so there are tweaks to be done yet but only as a quick example.

Thanks for any thoughts.

-Steve

**Beverleyh** · 11-02-2012, 09:26 PM

So you're probably looking to float 3 divs alongside each other - the outer ones with fixed widths and the middle one with a fluid % width, and all displayed as inline-block elements.

The middle div should have text-align:centre and the pic inside should have left and right auto margins to place it in the centre.

You should also probably consider containing everything in an outer div and use max-width to limit the overall width on very wide screens. A fluid design is brilliant up to a certain point but with these really high resolution monitors on the market, a totally fluid middle content might look weirdly stretched for some folk.

An any case, using some of the pointers above along with your budding new web designer skills, you should mock up a dummy page to give us something to offer further advice on.

Good luck - let us know how you get on.

**sreilly24590** · 11-02-2012, 10:01 PM

Forgive my ignorance here but are we talking the following?:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>

<div id-wrapper>
<div id=obs>
</div>
<div id=title>
</div>
<div id=image>
</div>
</div>

</body>
</html>

And have the style sheet to place the divs?

Code:

@charset "utf-8";
/* CSS Document */

.wrapper {
	height: 200px;
	width: 100%;
	background-image: url(images/banner_background.png);
	background-repeat: repeat-x;
}
.obs {
	display: inline-block;
	float: left;
	height: 200px;
	width: 330px;
	background-image: url(images/banner_background.png);
	background-repeat: repeat-x;
}
.image {
	display: inline-block;
	float: left;
	height: 200px;
	width: 300px;
	background-image: url(images/banner_background.png);
	background-repeat: repeat;
}
.title {
	text-align: center;
	display: inline-block;
	height: 200px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/banner_background.png);
	background-repeat: repeat-x;
}

The images are stacked on top of each other and the background image doesn't show up at all. I think I'm going crossed eyed from all my reading.

Thanks,

Steve

**Beverleyh** · 11-02-2012, 10:55 PM

Thats because you've set the middle column to 100% so its filling all the width and pushing out the divs to either side (which in this case causes the stacking effects)

What I gave you was just the basics to start you off but a full example would be this here: http://www.dynamicdrive.com/style/la...d-fluid-fixed/

**bernie1227** · 11-02-2012, 11:08 PM

Please use the forum's bbcode tags to make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] .....[/html]
for js/css/other.......[code] code goes here................[/code]

**sreilly24590** · 11-03-2012, 12:22 AM

I think I see where I went wrong. I set the left margin to 330px and the right to 300px with the top and bottom at 0. It still isn't displaying properly so I need to look deeper. I hope I posted this properly.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="div.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id-wrapper>
<div id=obs><img src="images/DRO_trans.png" width="330" height="200">
</div>
<div id=title><img src="images/glimpses-astral.png" width="450" height="120">
</div>
<div id=image><img src="images/Thor-3rd-300.jpg" width="300" height="198">
</div>
</div>

</body>
</html>

The CSS:

HTML Code:

@charset "utf-8";
/* CSS Document */

.wrapper {
	height: 200px;
	width: 100%;
	background-repeat: repeat-x;
}
.obs {
	display: inline-block;
	float: left;
	height: 200px;
	width: 330px;
	background-image: url(images/banner_background.png);
	background-repeat: repeat-x;
}
.image {
	display: inline-block;
	float: left;
	height: 200px;
	width: 300px;
	background-image: url(images/banner_background.png);
	background-repeat: repeat;
}
.title {
	text-align: center;
	display: inline-block;
	height: 200px;
	margin-right: 300px;
	margin-left: 330px;
	background-image: url(images/banner_background.png);
	background-repeat: repeat-x;
	margin-top: 0px;
	margin-bottom: 0px;
}

I have to say tables are so much easier!

Thanks again,

Steve

**sreilly24590** · 11-03-2012, 12:24 AM

Originally Posted by bernie1227

Please use the forum's bbcode tags to make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] .....[/html]
for js/css/other.......[code] code goes here................[/code]

Sorry about the snafu, I'll be sure to use the above format.

Thanks,

Steve

**bernie1227** · 11-03-2012, 12:45 AM

here you go:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */


.wrapper {
	height: 100px;
	width: 100%;
	background-repeat: repeat-x;
}
#obs {
	display: inline-block;
	float: left;
	height: 200px;
	width: 330px;
	background-image: url(images/banner_background.png);
	background-repeat: repeat-x;
}
#image {
	display: inline-block;
	height: 200px;
	width: 400px;
	background-image: url(images/banner_background.png);
	background-repeat: repeat;
	position: absolute;
}
#title {
	text-align: center;
	display: inline-block;
	height: 200px;
	background-image: url(images/banner_background.png);
	background-repeat: repeat-x;
}
</style>
</head>

<body>

<div class="wrapper">
<div id="obs"><img src="images/DRO_trans.png" width="330" height="200">
</div>
<div id="title"><img src="images/glimpses-astral.png" width="450" height="120">
</div>
<div id="image"><img src="images/Thor-3rd-300.jpg" width="300" height="198">
</div>
</div>

</body>
</html>

one of the main problems was that you were using class identifiers in the css for objects that are id's.
so for example:

Code:

.example1 {
    position: absolute;
}

would correspond with:

Code:

<div class="example1">

so, if you are refering to a class, you use the . and if you use an id:

Code:

#example1 {
    position: absolute;
}

would correspond with:

Code:

<div id="example1">

so in short, in css, you use . for class= and you use # for id=

**sreilly24590** · 11-03-2012, 04:17 PM

Thanks Bernie, that was a great help. I did correct the css sheet and put the proper widths for the left and right images, 330px and 300px respectively as well as correct the confusion between the id's and class designations. I also changed the wrapper height to 200px to match the total header height. That said, the preview in browsers isn't showing a liquid display. It seems the center content is now a fixed width. The layout only seems to go partially across my 1920 px monitor display, maybe 1000 or so pixels. In IE9 there's a gap between the right image and the center although there isn't any gap with Firefox or Google Chrome.

-Steve

Thread: Liquid CSS 3 column Header Layout - fixed, liquid, fixed

Thread Tools

Search Thread

Liquid CSS 3 column Header Layout - fixed, liquid, fixed

Example of Layout using Tables

The Following User Says Thank You to Beverleyh For This Useful Post:

The Following User Says Thank You to Beverleyh For This Useful Post:

The Following User Says Thank You to bernie1227 For This Useful Post:

The Following User Says Thank You to bernie1227 For This Useful Post:

Similar Threads

CSS Liquid Layout - (Fixed-Fluid) Auto Height of left column

CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)

fixed vs. liquid layout

Problem with CSS Liquid Layout #2.1- (Fixed-Fluid)

About 3-col Liquid Layout #3.7- (Fixed-Fixed-Fluid)

Bookmarks

Bookmarks

Posting Permissions