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">
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 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;
}
In my site, I have two divs - right and left. Both are contained within a wrapper div. Here is my code:
#wrapper{
width:1000px;
height:750px;
margin:auto;
}
#left{
width:500px;
height:750px;
float:left;
position:relative;
}
#right{
width:500px;
height:750px;
float:right;
position:relative;
}
In Chrome, no problem.
In Firefox, no problem.
In Safari, no problem.
In Opera, no problem
In IE, the #right div is in the same location horizontally, but vertically it's below the #left div.
I've tried a few different techniques to remedy this. Setting the wrapper line height to 0, setting the right display to inline, reducing the size of the right and left divs (I thought maybe there was a margin/padding issue). I've run out of ideas now, can anybody offer any help of the issue?
In All Browsers (except IE):
In IE:
There's nothing wrong with the CSS you've posted. It will work in all browsers as expected (I've decreased the widths in my example).
What's happening is that you've got an element in one of your columns that's forcing the width of either #left or #right to be greater than 500px. The easiest way to fix this is to start removing elements until the float drop disappears. Then you can figure out if there's a solution for the offending element (i.e. set its width or set overflow: hidden or scroll).
Try using float:left for both the #right and #left divs. You could also probably take out the position: relative as well.
put both left and right divs as float:left
I have a div under a float:right div. For some reason, the top margin cannot be applied to the first div. here is the css
#over{
width:80%;
float:right;
color:#e68200;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:10px auto; /*does not work!!!*/
width:95px;
height:20px;
}
does anyone know what's going on?
Floated things are kind of floated out of the normal layout, so generally don't affect other things that aren't floated like them. Of course the float behaviour in different browsers differs, but that's the general idea.
After the floated div you'd need something (like an empty div) that will clear the float (has style="clear:both;").
However, like I said, browser behaviour will still vary, on where it then decides the margin should be counted from. There are of course workarounds for that. See this page for more on that.
A solution without extra <div>
What you see, is the problem of collapsing vertical margins in CSS3. This problem will be more easily solved with the advent of CSS4. In the mean time, it is not a good idea to add an extra <div>, as easy as it may sound. It is generally better to keep content and presentation strictly separated.
Here is how I solved this issue on my website. The solution exploits the absence of vertical margin collapse inside inline blocks.
#under should contain at least the following items:
#under {
clear: both;
display: inline-block;
width: 100%;
}
try this css snipe, i think this will solve your problem.
#over{
width:80%;
float:right;
color:#e68200;
background-color:#234fdd;
height:auto;
margin-bottom:30px;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:auto;
width:200px;
height:20px;
background-color:#23ffff;
}