im working on a 3 column webpage. i would like to freeze the left n right column. i tried setting to position:fixed on the left column first but everything other div just crash to the left.
any idea??
position:fixed takes the element out of the normal "flow" of elements. I typically circumvent this by setting margin-left of the middle column to be equal to the width of the left column plus the desired gutter. For example, if the left column is 250px and the gutter is 25px then the margin-left of the middle column would be 275px.
Sample code (this keeps the middle column fluid in width):
#wrapper { position: relative; min-width: 800px; max-width: 1000px; margin-left: auto; margin-right: auto; }
#left-col { position: absolute; top: 0; left: 0; width: 250px; }
#right-col { position: absolute; top: 0; right: 0; width: 250px; }
#middle-col { position: relative; margin-left: 275px; min-width: 250px; max-width: 450px; }
<div id="wrapper">
<div id="left-col"> left </div>
<div id="middle-col"> middle </div>
<div id="right-col"> right </div>
</div>
You need to set margin on the center div to keep the space for the other two.
Here is a jsfiddle: http://jsfiddle.net/pfxxL/
#left {
width: 100px;
position: fixed;
top: 0;
left: 0;
background: red;
}
#right {
width: 100px;
position: fixed;
top: 0;
right: 0;
background: blue;
}
#center {
margin-left: 100px;
margin-right: 100px;
height: 750px;
background: green;
}
<div id="left">
left left<br/>
left left<br/>
left left<br/>
</div>
<div id="center">
center
</div>
<div id="right">
right right<br/>
right right<br/>
right right<br/>
</div>
Related
This might be simple but I'm having difficulties getting this right.
I want to be able to maintain the proportions and positions of multiple center aligned DIVs while resizing. Like in a fluid layout.
This is a example jsFiddle: https://jsfiddle.net/qp6pubtv/. I want to maintain this in a fluid environment.
html:
<div>
<div class="outouter">
<div class="outer">
<div class="middleA"></div>
<div class="middleB"></div>
<div class="middleC"></div>
</div>
</div>
</div>
css:
.outouter{
background-color: GreenYellow;
width:300px;
height: 250px;
position: absolute;
}
.outer{
background-color: DarkSeaGreen;
width:90%;
height: 90%;
position: relative;
margin: 0 auto;
}
.middleA{
background-color: CadetBlue;
width:80%;
height: 80%;
position: absolute;
margin: 0 auto;
}
.middleB{
background-color: DarkGoldenRod;
width:70%;
height: 70%;
position: absolute;
margin: 0 auto;
}
.middleC{
background-color: DarkOrchid;
width:60%;
height: 60%;
position: absolute;
margin: 0 auto;
}
You can add left and right properties into each inner block, i.e.
.middleA{
background-color: CadetBlue;
width:80%;
height: 80%;
position: absolute;
left: 0; /*this*/
right: 0; /*this*/
margin: 0 auto;
}
http://jsfiddle.net/qp6pubtv/1/ (I also made the parent 100% width and height)
You need set width for wrapper div width in % or em it gonna main, for each step inner need set dimension relative outer in %. On resize width would be changed.
Most examples on CSS bars are showing how to make a wrapper, and have an inner bar going from left to right.
I am looking to combine 2 bars, one from left to right, but on the same hight a bar from right to left.
So far, I have:
<div id="skills">
<div class="grid left">
<div class="bar pct-75"><div class="inner"></div> </div>
</div>
<div class="labels">
<p>Label</p>
</div>
<div class="grid right">
<div class="bar pct-75"><div class="inner"></div> </div>
</div>
</div>
And CSS:
.grid {
border-left: 1px dotted #e8ab6a;
border-bottom: 1px dotted #e8ab6a;
float: left;
padding: 10px 0;
position: relative;
}
.bar {
height: 15px;
margin-bottom: 20px;
position: relative;
width: 100%;
z-index: 1;
.inner {
background-color: #feac40;
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
}
Fiddle: http://jsfiddle.net/f8WKt/
What is the trick to make the bar from right to left?
try adding
.left .bar.pct-75 .inner {
left: 25%;
right: 0;
}
http://jsfiddle.net/f8WKt/3/
Assuming you want to join the 2 bars at the middle
I have provided an example of what I think you have asked
DEMO http://jsfiddle.net/f8WKt/5/
I have used position absolute within a ralative positioned div. The right one has right: 0; and the left one has left: 0;
.inner {
background-color: #feac40;
position: absolute;
width: 80%;
bottom: 0;
top: 0;
}
.right .inner {
right: 0;
}
.left .inner {
left: 0;
}
I have put a border around them to make it clear that one is left to right and the other is right to left.
Add right:0 to your right bar.
fiddle: http://jsfiddle.net/5SUVb/
I have two containers both are relative and both are set float right. My target is that, the left container to give height 100% of the screen and in a fixed position. But when I do it, all the other elements get broken. Suggestions kindly appreciated.
http://jsfiddle.net/VpxeC/3/
<div class="outleftcontainerunder">
</div>
<div class="maincontainer">
<div class="innermaincontainer">
<div class="articlebutton"></div>
<div class="discussionbutton"></div>
<div class="editbutton"></div>
<div class="searchbar"></div>
</div>
</div>
body
{
margin: 0;
padding: 0;
}
.outleftcontainerunder
{
width: 175px;
height: 250px;
background: green;
float: left;
position: relative;
}
.maincontainer
{
width: calc(100% - 175px);
height: 1000px;
float: left;
position: relative;
}
If you remove the float on the left container, and move the main container to the right it should work how I think you want it to.
See: http://jsfiddle.net/VpxeC/2/
.outleftcontainerunder /*I want this div to be in position fixed and height as 100% of the screen. But when I do it, there is a chaos*/
{
width: 175px;
height: 250px;
background: green;
position: fixed;
height: 100%;
}
.maincontainer
{
width: calc(100% - 175px);
left: 175px;
height: calc(100% + 50px);
float: left;
position: relative;
}
Check this out: jsFiddle Demo
.outleftcontainerunder
{
width: 175px;
top: 0;
bottom: 0;
background: green;
left:0;
position: fixed;
}
Also modified this:
.maincontainer
{
float: right;
}
What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Center"></div>
<div id="Header_Right"></div>
</div>
The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.
I can not get the CSS to work properly.
I assume you want those 3 divs to fill each with different content, the outsides filled fluidly or multiline. Otherwise the answer could be much 1) more simple. I also assume that the center div defines the total height of the header.
Given these two assupmtions, still a few different scenarios are thinkable of which I will give 4 examples from which you can choose the best fitting solution.
The HTML is exactly yours.
The CSS looks like:
#Header_Container {
width: 100%;
position: relative;
}
#Header_Left {
position: absolute;
left: 0;
right: 50%;
margin-right: 480px;
}
#Header_Right {
position: absolute;
left: 50%;
right: 0;
margin-left: 480px;
top: 0;
}
#Header_Center {
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}
Now, you could change behaviour of left and right with a few extra styles:
height: 100%;
overflow: hidden;
See demonstration fiddle.
1) When the sides may be partially invisible outside the browser window (in case which you would align content in de left div to the right, and vise versa), then I suggest the solution in this fiddle demo which does not require absolute positioning at all so that any content below the header is properly cleared in all circumstances.
You must fix it using padding and box model + position : relative - it can be done without HTML Change
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
And CSS ( 100px is for example )
#Header_Container{ overflow: hidden; height: 100px; }
#Header_Container *{ box-sizing: border-box; height: 100%; }
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }
Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example
If I got you right then this might be a possible solution.
#container {
width: 100%;
height: 150px;
}
#left {
position: absolute;
left: 0;
width: 50%;
height: 150px;
background-color: #FF0000;
}
#right {
position: absolute;
right: 0;
width: 50%;
height: 150px;
background-color: #0000FF;
}
#center {
position: absolute;
left: 50%;
margin-left: -480px;
width: 960px;
height: 150px;
background-color: #888888;
}
#left basically says that the element will be positioned absolute and attached to the left side with a width of 50%. Same applies to #right just for the right side.
#center positions the element absolute pushed 50% to the left and then with a negative margin of width/2 which in your case would be 480px to position it in the center.
The order of the elements in the HTML is important for this hack.
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
The #center DIV must be the last element if you don't want to work with z-indexes.
Here's a fiddle to test it.
HTML:
<div id="Header_Container">
<div class="Header_Side" id="Header_Left"></div>
<div class="Header_Side" id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
CSS:
#Header_Container {
position: relative;
width: 100%;
}
#Header_Container > div {
height: 158px; /* height of the image */
}
.Header_Side {
position: absolute;
width: 50%;
}
#Header_Left {
left: 0;
background-color: blue;
}
#Header_Right {
left: 50%;
background-color: green;
}
#Header_Center {
position: relative;
width: 158px; /* width of the image */
margin: 0 auto;
background-image: url('...');
}
Also see this example.
This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/
HTML
<div id="header_background_container">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="header_content_container">
<div id="header_content"><p>Content goes here</p></div>
</div>
CSS
#header_content_container {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#header_content {
width: 960px;
margin: 0 auto;
background: red;
height: 100%;
}
#header_left {
background: white;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
#header_right {
background: black;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
I have a question:
There are 3 divs. 2 of them should have their background-images and their position is to the 2 sides of user-area. (one to the right, and one to the left). The 3rd div should be over them and full-width.
How can I do this with css?
Make either those two divs or the third div positioned absolutely. Assign a z-index to the third div higher than for those other two.
(Well, as far as the talk about CSS can go without example)
<style>
div.holder-for-left-and-right
{
width: 100%;
overflow: hidden;
position: relative;
}
div.left
{
float: left;
width: 100px;
height: 50px;
background: url(...) no-repeat;
z-index: 1;
}
div.right
{
float: right;
width: 100px;
height: 50px;
background: url(...) no-repeat;
z-index: 1;
}
div.on-top-of-them
{
position: absolute;
top: 0;
width: 100%;
height: 50px;
z-index: 2;
}
</style>
<div class="holder-for-left-and-right">
<div class="left">I am leftM</div>
<div class="right">I am right</div>
<div class="on-top-of-them">I am over them</div>
</div>