Positioning the boxes

spoooooky · 05-11-2012, 05:37 AM

Hello everyone
Im new to web designing and im facing a problem

Script :
#wrapper {
width :985px ;
margin:0 auto ;
border :1px solid #18A4ED ;
}

#design1 {
width :150px ;
height : 250px ;
border : 1px solid #000 ;

background-position : top-left ;

}

#header {
width : 700px ;
height : 250px ;
background-image : url('../White/header.jpg');
background-repeat : no-repeat ;
background-size : 900px 200px ;
background-position : centre;
border : 1px solid #000 ;
}

okey so i planned for getting a bar like thing at right and left of the screen and the header to be in the middle
somthing like this :

another like for image :http://postimage.org/image/iduemr3sv/

but it comes that the bar comes at top nad then the header
if you have any solutions /suggestions please let me know
thanks,

_Aerospace_Eng_ · 05-11-2012, 06:00 AM

We need to see your HTML as well.

spoooooky · 05-11-2012, 06:21 AM

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equi="Content-Type" content="text/html; charset=iso-8859-1">

<title>

</title>

<style type ="text/css">

#wrapper {
width :985px ;
margin:0 auto ;
border :1px solid #18A4ED ;
}

#design1 {
width :150px ;
height : 250px ;
border : 1px solid #000 ;

background-position : top-left ;

}

#header {
width : 700px ;
height : 250px ;
background-image : url('../White/header.jpg');
background-repeat : no-repeat ;
background-size : 900px 200px ;
background-position : centre;
border : 1px solid #000 ;

}

</style>

</head>

<body >
<div id="wrapper">

<div id = "header">

</div>

<div id ="design1">
</div>

<div id ="design2">
</div>

</div >

</body>

</html>

Here it is ..
not much is done since im stuck on it .

_Aerospace_Eng_ · 05-11-2012, 06:30 AM

Try this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equi="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type ="text/css">
#wrapper {
	width :985px;
	margin:0 auto;
	border :1px solid #18A4ED;
	overflow:auto;
}
#design1 {
	width :150px;
	height : 250px;
	border : 1px solid #000;
	float:left;
}
#design2 {
	width :129px;
	height : 250px;
	border : 1px solid #000;
	float:right;
}
#main {
	margin:0 131px 0 152px;
}
#header {
	width : 700px;
	height : 250px;
	background-image : url('../White/header.jpg');
	background-repeat : no-repeat;
	background-size : 900px 200px;
	background-position : center;
	border : 1px solid #000;
}
</style>
</head>

<body >
<div id="wrapper">
	<div id="design1"> </div>
	<div id="design2"> </div>
	<div id="main">
		<div id="header"> </div>
	</div>
</div >
</body>
</html>

You need to float design1 and design2. Once you do that you need to clear your floats. Easiest way is to use overflow:auto on #wrap. To get your header and any other content in between the columns you need to add some left and right margins. I have wrapped your #header in another div as I assume you will also be adding content. I'm not sure about the support for background-size yet as CSS3 is still in a draft state. Another thing to note is CSS uses US English for spelling. Firefox will support the Australian or UK spellings e.g. centre vs center but IE may not.

When posting code please use the [code]your code here[/code] tags, not the quote tag.

spoooooky · 05-11-2012, 06:40 AM

thanks alot , it was really helpful