I have a site which has several different options for left and right containers and a centre.
The left div is always the same size, however some times it's not shown.
The right has 3 options, small, normal or wide. Only one rightside will be shown at once, but some times there's none.
The center should adjust to the left as well as the right side taking up as much space as possible but not push the right div to a new line (as it does with width:100%)
Is this at all possible? Having a div just, doing what you want it to do without having to tell it how?
I made an example in Fiddle in case my explanation was unclear: http://jsfiddle.net/WDZFx/13/
Thanks in advance!
Jennica, here's a sample http://jsfiddle.net/uQ4TH/ , but it has the same problem I mentioned earlier, the center one will expand only according to the contents, though the maximum possible will be 50%;
Make use of percentages instead of specifying the individual widths for the left/center/right:
Modify your css as:
#Wrap {
width:100%;
}
#Left {
width: 10%;
float:left;
background-color:pink;
}
#Center {
width: 30%;
float:left;
background-color:beige;
}
#Right {
width:60%;
float:left;
background-color:silver;
}
Related
Consider this JSFiddle: http://jsfiddle.net/GFsgq/5/ (you may have to zoom out a bit).
It shows a layout that I'm trying to achieve. So far it's been going alright, but I've hit a roadblock. I want to position two divs 77px in height side by side of the centered divs. They need to retain width to always touch the edge of the screen and their center div. I'm not sure how to do this with my limited knowledge of CSS, short of adding properties at random.
Her is a picture to help you understand: http://i49.tinypic.com/2ntz34n.png
The blue strips are where I want the divs to be. How do I achieve this?
You need to add this in your CSS:
header:after {
content: "";
display: block;
background-color: blue;
width: 100%;
height: 80px;
}
jsFiddle: http://jsfiddle.net/GFsgq/32/
fullsrcreen result: http://jsfiddle.net/GFsgq/32/embedded/result/
i would add parent div spanning thw dith of the screen with position:relative; and to the two child divs use position:absolute; and position one right:0px; and the other left:0px; I am unsure about how you want to distribute width, if you have any other problems then come back.
I'm trying to get two divs to appear side by side as follows:
First div is displayed on the left float: left and takes up as much space as it needs.
Second div appears on the right float: right and takes the remaining space.
The issue is that I do not have a set width for any of those divs so they just take up as much space as they can: jsFiddle
I have found several solutions but all of them required setting width for one of the divs which is what I'm trying to avoid. Any possible solution?
#left, #right { display: table-cell; }
#left { white-space: nowrap; }
http://jsfiddle.net/CoryDanielson/LzREv/5/
I know this has been asked a million times before but i still can't seem to find the answer (most questions seem to be the opposite of what i want not the same).
I have two divs say #left and #right. #right has fixed dimensions 150px x 50px. I want #left to expand and fill the remaining space and #right to be on the very right of the screen. I have tried floating them in different ways and also setting display: inline-block; but i still cant seem to nail it. All the articles i've read are about the left div being fixed and the right one growing. I tried reversing what i read but it always leads to the #left div floating around #right. What i mean by this is, my #left div will with shrink to its smallest (inline-block) or it will display the first 50px up to the #right then the rest of #left will tuck under #right rather than staying flush.
I hope this makes sense. It's kind of hard to explain.
Write like this:
.right{
width:150px;
height:150px;
float:right;
background:red;
}
.left{
height:150px;
background:green;
overflow:hidden;
}
HTML
<div class="right">fixed</div>
<div class="left">auto</div>
Check this http://jsfiddle.net/TW4dn/
you can try this
<div class="right" style="clear:right">
I'm trying to create liquid layout, so that the left side of the site expands based on the screen size, while the right side stays a fixed width. This works fine in IE, but in Chrome the left side is only expanding the length of the content within, not the full length of the space.
#bbContent{width:100%; min-width:829px;}
#leftActivity
{
float:left;
margin-right:334px;
min-width:421px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:right;
width:320px;
margin:18px 14px 0 -334px;
}
Is this what you are looking for?
http://jsfiddle.net/KnVrA/1/
it makes sense for leftActivity not to expand since it is floating, if the content is not that long then it would not expand
Edit: Used Kyomu's fiddle and took out some stuff and rearranged some stuff
Update: using percent based http://jsfiddle.net/KnVrA/2/
you can add wrappers inside of the left to create padding on the right side
I corrected the solution by adding a wrapper around the left side, and removing the float from #leftActivity. Adding a negative margin on the wrapper, and removing the negative margin from the right side.
#leftWrap{float:left; width:100%; min-width:421px; margin-right:-334px;}
#leftActivity
{
margin-right:334px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:left;
width:320px;
margin:18px 14px 0 0px;
}
I am not sure what to do on this one, I'm not a programmer, but trying to learn CSS as this is how the theme I am using was coded in.
I've gotten quite far on my own, but this one stumps me Its two column Theme... As far as I have been able to get, I can use the following:
#left {
width: 235px;
padding: 10px;
margin-left: 20px;
position: fixed;
line-height: 15px;
If I change the position to Absolute, The whole page scrolls, If I leave it at Fixed, and add lets say, a Twitter feed, or other type of text that takes me past its reading where you would normally scroll, Its just cut off, cannot get to it, hightlight or scroll..
I've also toyed with the idea, of changing the theme to a 3 column theme, but Again, not a programmer, and i'd be really confused. any help would be great...
My Website is at 99lessoxygen.tumblr.com, code was found from http://nigredotheme.tumblr.com
I should note, that If its on Fixed, only the right side of page can be scrolled, and left side is locked..
I believe what your looking for is overflow:auto;
You will need to remove position:fixed.
#box1 {
height:100px;
width:200px;
float:left;
overflow:auto;
}
#box2 {
height:100px;
width:200px;
float:left;
overflow:auto;
}
JSFiddle
A position of absolute will inherit an absolute position from the relative parent div.
So for instance if you have a div set to 1000 pixels and a position of relative
and then insert another div inside of that div with a position of absolute and lets say right:100px it will display on the right side of the parent div 100 pixels out from the right.
try giving both columns a height and adding this:
overflow:auto;
This makes scrollbars appear on its container if the content overflows.