• Locked
2 replies [Last post]
Thu, 2013-08-22 22:57
tiltallin
tiltallin's picture
Offline
newbie
Last seen: 8 years 51 weeks ago
Timezone: GMT+5
Joined: 2013-08-22
Posts: 2
Points: 3

this is css code of this element 

        #sideLeft {
	float: left;
	width: 140px;
	margin-left: -100%;
	background: lightpink;
 
}
when I add position:fixed it dissappears and I cant find out the reason due to lack of experience. If this part of code is not enough here is coplete code 
* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	font: 12px/18px Arial;
	height: 100%;
	background-color:white;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	margin: 0 0 18px
}
 
input {
	vertical-align: middle;
}
#wrapper {
	min-width: 1000px;
	max-width: 2000px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
 
 
/* Header
-----------------------------------------------------------------------------*/
#header {
	height: 170px;
	background: lavender;
	margin-right:50px;
	margin-left:50px;
	margin-top:30px;
}
 
 
/* Middle
-----------------------------------------------------------------------------*/
#middle {
	margin-right:50px;
	margin-left:50px;
	margin-top:10px;
	padding: 0 0 80px;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '';
	clear: both;
	display: table;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 270px 0 0;
	background: aliceblue;
	margin-right:270px;
	margin-left:160px;
	height:1600px;
}
 
 
/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
	float: left;
	width: 250px;
	margin-left: -250px;
	background: lightgray;
 
}
#sideLeft {
	float: left;
	width: 140px;
	margin-left: -100%;
	background: lightpink;
 
}
 
/* Footer
-----------------------------------------------------------------------------*/
#footer {
	margin: -31px auto 0;
	min-width: 900px;
	height: 30px;
	background: #BFF08E;
	position: relative;
	margin-right:50px;
	margin-left:50px;
}

Top
Tags:
Fri, 2013-08-23 02:09
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi tiltallin, Position fixed

Hi tiltallin,
Position fixed attaches to the body.
the margin-left: -100%; will be what is causing the issue.
Also setting position means that float is irrelevant.

Top
Fri, 2013-08-23 12:24
#2
tiltallin
tiltallin's picture
Offline
newbie
Last seen: 8 years 51 weeks ago
Timezone: GMT+5
Joined: 2013-08-22
Posts: 2
Points: 3

Hello Tony, thank you for

Hello Tony, thank you for your reply. I am new to CSS. I wanted the content area and the corner sides to be at the same level. But I was not able to do that. Then I have used a code from a simple template. Actually I am not happy with this negative margins and etc because I don't clearly understand them. I have deleted the float and margin part from the left corner and it works. This is the new code: 

#sideRight {
	float: left;
	width: 250px;
	margin-left: -250px;
	background: lightgray;
 
}
#sideLeft {
	width: 140px;
	background: lightpink;
	height: 400px;
	position:fixed;
 
}

Sideleft is at the same level as content part however when I delete float and margin parts from the sideRight it changes its position and goes down or left according to what I delete. The code above holds the right side at the required level however position fixed command moves it to the left of sideleft. Can you explain why sideleft without any detailed positioning stays at the same level as content, and why it doesnt work with the right side. Also can you tell me a how to keep all this three areas at the same level with position:fixed working properly. Furthermore is there a way to make position:fixed only vertical. The reason why I ask is that when I minimize the page and go to the right the sideleft covers the content part. Thank you for your attention.

Top
  • Locked