Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Positioning DIVs

Status
Not open for further replies.
FesterSXS

FesterSXS

Programmer
Feb 4, 2002
2,196
GB
I would like to have the following setup for a page I am writing. I am keen to use CSS rather than tables and could use a little assistance.

-----------------------------------------
| TOP BAR |
-----------------------------------------
| | |
| | |
| MENU | MAIN CONTENT |
| | |
| | |
| | |
-----------------------------------------
| BOTTOM BAR |
-----------------------------------------

This should fill the page both for height and width. TOP and BOTTOM should have fixed heights and MENU should have a fixed width. The rest can be fluid.

I have tried with the following code but the BOTTOM bar is off the screen at the bottom. I realise this is due to me setting the container DIV to 100% height (I could do that when I used tables)
Code: 
<div id="top">

</div>

<div id="container">
  <div id="menu">

  </div>

  <div id="main">

  </div>
</div>

<div id="bottom">

</div>
and the stylesheet...
Code: 
#top 	{
	position: relative;
	margin: 0px;
	background: #003399;
	height: 35px; 
	}
	
#container {
	position: relative;
	height: 100%;
	}
	
#left 	{
	position: absolute;
	top: 0px;
	left: 0px;
	background: #EEEEEE;
	width: 160px; 
	}
	
#middle {
	position: absolute;
	top: 0px;
	left: 160px;
	background: #FFFFFF;
	}

#bottom {
	position: relative;
	margin: 0px;
	background: #003399;
	height: 35px;
	}

Tony
reddot.gif WIDTH=500 HEIGHT=2 VSPACE=3

 
Sort by date Sort by votes
Try this:

Code: 
<html>
<head>
<title>Untitled</title>

<style type="text/css">
<!--
.c1 {
	clear: both;
	height: 50px;
}

.c2 {
	border-top: 1px solid #000000;
	clear: both;
}

.c3 {
	float: left;
	width: 100px;
}

.c4 {
	float: left;
	border-left: 1px solid #000000;
}

.c5 {
	border-top: 1px solid #000000;
	clear: both;
	height: 50px;
}

.c6 {
	border: 1px solid #000000;
}
--></style>

</head>
<body>

<div class="c6">
	<div class="c1">TOP BAR</div>
	<div class="c2">
		<div class="c3">MENU</div>
		<div class="c4">MAIN CONTENT</div>
	</div>
	<div class="c5">BOTTOM BAR</div>
</div>

</body>
</html>

Hope that helps,
-Ron

We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are. -Me

murof siht edisni kcuts m'I - PLEH
 
Upvote 0 Downvote
Since the top and bottom are fixed height, the only section left to specify is the middle. Unfortunately, you stated that you wanted that section to remain fluid.

As you add content to the middle section it will begin to fill the window. One thing you could to do cheat would be to create an image that is 1 pixel wide and [red]n[/red] pixels high where [red]n[/red] is the smallest you want the cell to be. Make that image the same color as the background and add it to one of the middle cells. Now the cell will never shrink below the height of the image, but will expand to a larger size if needed.

Good luck,
Ron

We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are. -Me

murof siht edisni kcuts m'I - PLEH
 
Upvote 0 Downvote
When i said fluid I meant it should fill the screen, sorry for the confusion.

I am designing the page to fit on 800x600 but would like the width and height to flow to fill whatever resolution the user may have on their machine.

Assigning a HEIGHT of 100% to a TABLE cell will do this fine even if there is content above and/or below it. The 100% seems in that case seems to assume 100% of the available space left on the screen, rather than an absolute value of 100% regardless of whats above or below it.

Does this make sense to anyone but me? I hate Friday afternoons!!


Tony
reddot.gif WIDTH=500 HEIGHT=2 VSPACE=3

 
Upvote 0 Downvote
Actually, if you look at the w3 specs for css, height property of 100% is the same as auto (the height expands with the content) if the container in which the element with the height 100% does not have defined height. Meaning, since the body does not have defined height, your 100% will be translated as auto -- that said, there is no known css only technology today that could expand the element to fill the height. Sorry.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
667
tyutghf
tyutghf
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
163
vacunita
vacunita
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
198
ggriffit
ggriffit
Blueie
  • Locked
  • Question
Positioning Twitter box? 1
Replies
7
Views
224
1DMF
1DMF
c0deM0nK424
  • Locked
  • Question
Problem with positioning Logo, Search Box and Language Bar OUTSIDE of the navbar (Bootstrap) 1
Replies
2
Views
148
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top