Fluid/fixed web design

Page 1 of 1

5 Replies - 357 Views - Last Post: 03 February 2012 - 03:47 PM

Topic Sponsor:

#1 midgetboytom  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 31-January 09

Fluid/fixed web design

Posted 03 February 2012 - 12:06 PM

Im having some troubles with the overall layout of my initial web page.

I am trying to make a web page similiar to this: NFL in that i want it to have a fixed middle section with the left and right sides filling in any gaps for the wider browsers.

i didnt want to use frames as ive read somewhere that thats not really recommended.

I tried using different sections to do it such as a header, footer, left, right, content_area and large wrapper but it doesnt quite click.

Heres the bits of code that i have so far:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fixed layout sheet</title>
<link href="layout.css" rel="stylesheet" text="text/css" />
</head>

<body>
<div id="header">header</div>
<div id="wrapper">
<div id="content">content</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
<p>
</p>
</body>
</html>


and the style sheet:

body{
margin:0;
padding:;
}

#header {
float:left;
width:100%;
background-color:#FF00FF;
}

#footer {
float:left;
width:100%;
background-color:#FF00FF;
}

#wrapper{
border: 1px solid black;
width:1000px;
margin:20px auto;
text-align:left;
overflow:hidden;

}

#left {
position:relative;
float:left;
width:200px;
background-color:#000000;
right:200px;
margin-left: -100%;
margin-bottom:-2000px;
padding-bottom:2000px;
}

#right {
position:relative;
float:left;
width:125px;
background-color:#00FF00;
margin-right: -100%;
margin-bottom:-2000px;
padding-bottom:2000px;
}

#content {
float:left;
background-color:FF0000;
width:100%;
margin-bottom:-2000px;
padding-bottom:2000px;
}


Oh and sorry for the messy code.

Is This A Good Question/Topic? 0
  • +

Replies To: Fluid/fixed web design

#2 Slice  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 126
  • View blog
  • Posts: 432
  • Joined: 24-November 08

Re: Fluid/fixed web design

Posted 03 February 2012 - 12:42 PM

try:

body
    {
        margin: 0 auto;
        width: 1024px;
    }


But change the width to the desired width of your page :)
Was This Post Helpful? 0
  • +
  • -

#3 midgetboytom  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 31-January 09

Re: Fluid/fixed web design

Posted 03 February 2012 - 12:55 PM

nope seems, to just push everything else around.

I think ive tried that before as it seems logical but cant figure out why it doesnt work.

ive looked through it all and im sure theres just one thing missing that brings it together :S
Was This Post Helpful? 0
  • +
  • -

#4 midgetboytom  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 31-January 09

Re: Fluid/fixed web design

Posted 03 February 2012 - 01:54 PM

ok i figred that the way im think of involves 3 columns + a header and footer. The header and footer just reside at the bottom with centred text/links and take up 100% width.

The three columns in the middle would be the middle one having a fixed width of about 1000px ( to incoporate most browsers screens) and then the outer two colums varying in width depending on how wide the screen is.

For example if a screen was 1920 pixels wide then it would divide up into [460px][1000px][460px]
but if it was only 1300px wide then it would be [150px][1000px][150px].

Hope this better explains what im trying to do.
Was This Post Helpful? 0
  • +
  • -

#5 e_i_pi  Icon User is online

  • = -1
  • member icon

Reputation: 363
  • View blog
  • Posts: 1,023
  • Joined: 30-January 09

Re: Fluid/fixed web design

Posted 03 February 2012 - 03:19 PM

Well, you can go with floats, and give yourself an aneurism, or you can just use a double wrapper and absolutely position the elements inside:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fixed layout sheet</title>
<link href="layout.css" rel="stylesheet" text="text/css" />
</head>

<body>
<style>

body{
margin:0 auto
}

#header {
width:100%;
background-color:#FF0000;
}

#footer {
width:100%;
background-color:#FFFF00;
}

#wrapper {
margin: 0 auto;
width: 1000px;
}

#inner {
position: relative;
height: 100%;
}

#left {
position: absolute;
left: 0px;
width: 200px;
top: 0px;
bottom: 0px;
background-color: #00CCCC;
}

#right {
position: absolute;
right: 0px;
width: 125px;
top: 0px;
bottom: 0px;
background-color: #CCCC00;
}

#content {
margin: 0px 125px 0px 200px;
background-color: #FF6600;
}

</style>

<div id="header">header</div>
<div id="wrapper">
	<div id="inner">
		<div id="left">left</div>
		<div id="right">right</div>
		<div id="content">
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
			content<br><br><br><br><br>
		content<br><br><br><br><br>
		</div>
	</div>
</div>
<div id="footer">footer</div>
<p>
</p>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#6 midgetboytom  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 31-January 09

Re: Fluid/fixed web design

Posted 03 February 2012 - 03:47 PM

solved it, thanks. This can be closed
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1