Jump to content

Box with head and side bar

Recommended Posts

i am looking at a box ontop of a blank white page.inside this box i have a header running across the top of the box, completely from left to right filled in with a background colour. i Want to have a side bar (running down the left hand side with links in it filled with a blue colour) with <p>'d text going to the right. i want the blue side bar to go from the bottom of the header to the bottom of the box, the bottom of the box is judged by the size of the paragraphs of text to the right.so far i have the blue side bar at the right width etc with links inside it running partialy down the left hand side, but finished when the links finish, like with text. the links are in <UL>.this is the html

		<div id="wrapper">				<div id="welcome">		<h1>This is a header</h1>			</div>			<div id="left">				<ul>					<li>						<a href="">Link</a>					</li>					<li>						<a href="">Link</a>					</li>					<li>						<a href="">Link</a>					</li>				</ul>			</div>				<div id="right">				<h3>				This is some text in a h3				</h3>				<P>				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ultrices, 				justo at convallis sollicitudin, nisi nisi rutrum metus, at aliquet nisi mi vel 				lectus. Donec orci sapien, facilisis non, blandit eu, hendrerit sed, purus. 				Nullam erat sem, consectetuer nec, interdum lacinia, eleifend eu, tellus. Nullam 				nisi nunc, tincidunt quis, consequat ut, pellentesque in, felis. Mauris molestie 				dictum magna. Nullam tempor, tortor auctor porta laoreet, justo pede molestie 				tortor, sed tincidunt nunc nibh ut turpis. Nunc vitae leo vel magna pellentesque 				tempus. Quisque aliquet nibh id erat. Suspendisse pulvinar scelerisque sem. 				Phasellus fringilla, massa sit amet mattis vulputate, felis risus lacinia erat, 				ac lacinia velit erat vitae nisi. Donec magna libero, porta ut, nonummy in, 				gravida a, ipsum. Cras vel erat ac tellus vestibulum cursus. Sed ut dui. Vivamus 				sit amet magna. Cras ac dui in mi ultrices iaculis. Aenean sagittis condimentum 				nulla. Curabitur dolor. Suspendisse potenti. Sed augue nibh, malesuada a, 				rhoncus vitae, scelerisque at, ligula. Aliquam sit amet lorem id elit tincidunt 				cursus. 				</P>			</div></div>

and this is the styles

#wrapper{	font-family: Century Gothic;	width: 600px;			border: 2px #9966cc;	border-style: window-inset;	background: #fff;	position: static;	margin-bottom: 10;}#welcome {	margin:0px;	padding:0px;	background-color: fc9;}#left{	margin:0px;	padding:0px;	background-color: #ccccff;	width:125px;}#right{	float: right;}

it wont work, and is totaly borked in FF but i'm aiming for IE compliant more than FF as it isn't public facing. any ideas?

Link to post
Share on other sites

I'm sorry but here i only can check with Safari and FireFox. I'm a OS X user :) I'm thinking about your problem i got other. your left side height is less than your content space, so you will get your text around your menu.Writting your content box on the left you can use float: left without problems.I will check a way to solve this and i will say you later. Sorry.OK, i supose that i got want you want:

<!-- HTML PAGE--><!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" /><link href="main.css" media="all" type="text/css" /><title>Untitled Document</title></head><body>	<div id="header">		<h1>your header</h1>	</div>	<div id="leftSide">		<ul>			<li>link1</li>			<li>link2</li>			<li>link3</li>		</ul>	</div>	<div id="mainArea">		<p>your contentsasdasdasdasdaaaaaaaaaaaaaaaaaaaaaaa</p>		<p>more content</p>		<p>other lines...</p>		<p>more</p>		<p>mores</p>		<p>more</p>	</div></body></html>

/*CSS file*/#header{	border: 1px solid #0000BB;}#leftSide{	border: 1px solid #33FF66;	width: 200px;	position: relative;	float: left;}#mainArea{	border: 1px solid #CC00CC;	position: absolute;	float: right;	left: 210px;}

I recommend you to read this article.Paulo A. Silva

Link to post
Share on other sites

To start with you need to add this to your left box#left {...float: left;...}Then remove the float from the right box and add a left margin that is bigger than the width of the left-hand box:#right {margin-left: 140px;}You will however encounter a couple of bugs in IE (the peek-a-boo bug and the guillotine bug) which can chop of parts of your div containers. Just google "IE CSS peek-a-boo" etc for some tips on how to solve it. It involves clearing the bottom of the div containers but I'm in a bit of a hurry and don't have time to go into more now.Good luck.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...