• Locked
1 reply [Last post]
Mon, 2013-03-25 17:44
ArtOfEctronicWar
ArtOfEctronicWar's picture
Offline
newbie
Last seen: 7 years 42 weeks ago
Timezone: GMT-4
Joined: 2013-03-25
Posts: 2
Points: 4

I created sample html from SamsTeachYourself and it does not work correctly. I checked my code at W3 and it was fine.

The middle content <div> is not expanding to maximum width of screen.

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

//mod edit: The following added from semi-duplicate post. (Reply to original post instead of starting a new topic) ~gt

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

</style>
 
 
</head>
 
<body>
<div id="header">
	<img src="gpf_canada.png" alt="Corp. Logo" width="125" height="100" style="float:left; margin:5px"/>
	<img src="airmiles.png" alt="AirMiles" width="100" height="100" style="float:right; margin: 5px"/>
</div>
<div id="wrapper">
	<div id="content_area">CONTENT</div>
	<div id="left_side">LEFT SIDE</div>
	<div id="right_side">RIGHT SIDE</div>
</div>
<div id="footer">
	<p> © 2217617 Ontario Inc.  March 2013 </p>
</div>
</body>
</html>

//mod edit: source code should be wrapped in code tags. Use the "code" button above the text-area, or use bbcode tags, [code] [/code]. Fixed. ~gt

Top
Tags:
Wed, 2013-03-27 00:52
#1
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to post ALL your code

You've left out styles for #header, #wrapper, #footer.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Top
  • Locked