I remember asking this question a while back but i can't seem to find it again! I've searched but i can't seem to find the solution i'm looking for.
Let's say i have two divs with 100% width floated next to each other. As they take up the entire screenwidth, there is no longer any space left for them to float on, and therefore the second div appear below the first one. What i want is to make the second div continue floating off screen next to the first one.
I think the solution i got was to set the display property to something else, but i'm not entirely sure.
Any suggestions?
I believe you would have to have a container and set the container width to 200%. The two inside divs with 50% width will fit inside.
#container_div{ width:200%}
.inner_div {width:50%}
You could position them absolutely.
<body style="padding:0; margin:0">
<div style="width:100%; position:relative;">
<div style="width:100%; height:100px; background:#f90; position:absolute; top:0; left:0;">COLUMN1</div>
<div style="width:100%; height:100px; background:#f00; position:absolute; top:0; left:100%;">COLUMN2</div>
</div>
</body>
They are positioned absolutely within the bound of the relatively positioned parent.
Then you switch between them you just switch the left values, from 0 to 100% respectively.
heights and background colours are just to see whats going on :)
give 50% width to both div
so they occupy 100% width together
Related
DEMO HERE
I have two divs in a container. Both divs have 100% and 100% height. How do I position those divs side by side?
I tried float:left and display:inline-block but nothing seems to work. Second div is always under first div, not side by side
P.S. I don't want to use absolute position and I want one div overflown.
If both of them has 100% width you can't get the second one side by side. You should use "width: 50%" in those divs (I suppose they didn't have margins or padding), and then "float:left" the first one. The second one should go to the right of the first one.
If you want to add both div side by side you can not set div width 100%, you can set width 50% to check both are side by side without using display:inline-block
.innerDivs{
width:50%; // Change 100% to 50%
height:100%;
float:left;
}
Check this Demo
You should add overflow:hidden; property in outer div to solve this
Check this Demo
HTML
<div style="width:300px;height:100px;border:3px solid black;margin-top:100px;margin-left:100px;overflow:hidden;">
<div class="innerDivs" style="background:orange"></div>
<div class="innerDivs" style="background:red"></div>
</div>
CSS
.innerDivs{
width:100%;
height:100%;
float:left;
}
so the past days i tried to achieve the following:
the idea being to have a div (red) that is ultimately centered (using margin:auto;), and on the same level (x-axis) another div that has a fixed size (blue).
on a huge enough display, maximized, it looks great.
now the fun part is when having a smaller screen and/or resizing the window. because of the auto margin, one of the divs overlaps the other:
this is what i want to prevent. (in explanation: red being the menu, blue being the logo)
so the first idea was to shift the red div the needed pixels of the blue div to the right, using padding-left:??px;
but that makes the red div no longer center itself absolutely, but padded ??px to the right. figuratively centered in an extra box (grey).
second idea being to create another (transparent) div on the right of the red div. but that makes the min-width of the whole site become out of bound:
in other words: the scroll bar becomes visible far to early. it's ought to appear just when the window is smaller than the sum of pixels of the red and blue div together. and not, like in img 4, where it appears just when the window is smaller than the sum of pixels of the red div and both divs right and left from it).
so what i want is that:
two divs, not overlapping (even when resizing), the right one at a fixed size, the left one in the center of the window, whithout creating a ghost div, creating blank space on low resolutions.
oh and please no javascript, if possible.
i hope my explanations helped a bit getting my idea.
and i furthermore hope someone with a great idea or with an overlooked feature can help me out.
I take it back... it's marginally possible... with a lot of hackish coding...
http://jsfiddle.net/7myd4/2/
http://jsfiddle.net/7myd4/2/show
There you will find the code and the demo. It involves a wrapper, padding, relative positioning, and a really hackish layout. :P
EDIT:
looking back at this answer from over two years ago... I've come to the conclusion that this answer is terrible.
I've updated it with code samples and a new demo (only thing different is formatting changes and moving inline styles to classes)
HTML
<div class="firstdiv"></div>
<div class="seconddiv">
<div class="innerdiv"></div>
</div>
CSS
body{
padding:10px 0px;
}
.firstdiv {
background-color:#ddd;
position:fixed;
left:0px;
width:200px;
height:200px;
}
.seconddiv {
margin:0 auto;
width:300px;
height:150px;
padding-left:400px;
position:relative;
left:-200px;
}
.innerdiv {
background-color:#ccc;
width:300px;
height:150px;
}
Demo: http://jsfiddle.net/7myd4/55/show
Source: http://jsfiddle.net/7myd4/55/
use Javascript to change the width of the div based on the window width. or use css stacks to check the max-width of the screen and have css for that size.
http://api.jquery.com/width/
http://api.jquery.com/resize/
or check out this stack.
How to dynamically change image/div dimensions based on window size?
I have a simple HTML layout:
<div style="position:relative; width:200px">
<div style="position:absolute; top:0; left:0; background-color:red; z-index:-1; width:100%; height: 100%"></div>
Some text goes here....
</div>
Something like this works fine in all the browsers, except for IE6. As the text is added the top div is stretched and absolutely position div is stretched as well. But in IE6 the absolutely position div will always stay only 1 line in height. I know that IE6 can't dynamically recalculate sizes, and because of that you have to set height: 100% on the body tag if you ever want to use height: 100% anywhere on the page, but in this case, I can't set height:100% on the outer div, since I want it to be just the right size for the text inside of it. Any help?
Add overflow: hidden; to the absolute div.
This is a known bug in IE6 but for the life of me I can't recall the solution. I'll look it up but, off the top of my head, try adding 'line-height:1', or some value, and see if it fixes it.
After a lot of testing and investigation, I came to a conclusion, that there's no way around this issue for IE6, other than JavaScripts, which doesn't work for me. So I had to change the structure around a bit. The end result looks something like this:
<div style="position:relative; width:200px; background-color:red;">
<div style="margin: -10px -20px">Some text goes here....</div>
</div>
This way the content of the inner div is going to set the height of the inner div and negative margins on it, will make sure that the outer div is always 20px bigger in height and 40px bigger in width the content div. I know the answer doesn't make sense when looking at the question, but it works exactly the way I need it too, since it allows me to create multiple divs on the background (outer div) with images and then adjust content div with negative margins, so that it occupies the same amount of space as all of the background divs.
I'm braindead on this and I know it's simple.
There's a header div, appears fine. There's a left-sidebar div, appears fine with top snuggled up to header div.
Then there's a main content div. There is an image and h1 which appear like you would expect up against the header div, but then a large gap appears until the navigation (in a nested div). Navigation is correctly in the main content div, but top of this div always aligns with bottom of sidebar content.
I've tried mixtures of clear:left and both and floating and whatnot. If inside the html I move the sidebar div below the main content div then the main content has no gap but the sidebar has a big top gap and appears flush to the bottom of where the main content nav ends.
What am I missing here, thanks in advance!
Are you setting any widths (or padding, margin, border) which might make your problematic div too wide to fit?
Remember that if you are doing something like :
width: 100%;
border: 1px solid;
Then your element will take up 100% width + 2 pixels.
It sounds like you have your sidebar occuring first in the source order.
If you have the two divs (sidebar, main) floated in different directions, then look at the width avaiable they are sharing. Reduce the width of one div (you should have width set on your floats) until their combine width, including padding, margin, borders fits in available space. (I will only use width in my example for brevity).
When this effect happens, in my experience, the one occurring later in the source order is the one that gets prevent from sliding up into it's spot by too much width.
<div id="container">
<div id="header">head</div>
<div id="sidebar">side</div>
<div id="mainContent">main</div>
</div>
Width of #sidebar & #mainContent too wide (#mainContent gets bumped down):
#container{
**width:950px;**
margin:0 auto;
background:blue;
}
#mainContent{
float:right;
**width:651px;**
background:red;
}
#sidebar{
float:left;
**width:301px;**
background:green;
}
Width of #sidebar & #mainContent fit inside container:
#container{
**width:950px;**
margin:0 auto;
background:blue;
}
#mainContent{
float:right;
**width:650px;**
background:red;
}
#sidebar{
float:left;
**width:300px;**
background:green;
}
btw...if you floated the two elements in the same direction, but their combined width is too wide, the last one in the source order would fit underneath the above floated element.
Does your h1 or img have a top margin? It will stick out of the top of the mainContent div and push it down.
I have a centered div on my site, using a fixed width and margin:0 auto;
All looks fine in IE, but on FF, for the pages with long content, only the top part of the div has the proper div color, and the rest has the body background color.
what I'm doing wrong?
many thx
Without seeing your code it's hard to tell, but my bet is that you've set the div height to %100, which means 100% of the viewport.
It will not stretch beyond that, even if the content is long enough. This is the correct behaviour.
To make it the full scree height when there's not enough content, and go beyond the viewport height when there's more than enough content, you'll need to use two divs.
Here's an example I've hosted:
Div height 100% fix
If you know the width (i.e:600px) and height of the div you can use the following.
I center divs in one direction using 3 parameters:
Horizontal:
<div class='hcnt'>Some H Centered Text</div>
CSS:
.hcnt{
left-margin:50%;
width:600px;
left:-300px;
}
Vertical:
<div class='vcnt'>Some V Centered Text</div>
CSS:
.vcnt{
top-margin:50%;
height:400px;
top:-200px;
}
Both:
<div class='hcnt vcnt'>Some completely Centered Text</div>