So I have two divs, on big screens they are side by side.
<div1> <div2>
On smaller screens, I want to get
<div2>
<div1>
I guess I could remove the float and put width:100% and display:block;. And the two divs are the one above the other, we are half-way there. But how I put the div2 above the div1 ? I tried putting opposite floats, one div floats right, the other left, but no luck.
Is negative margin a legit solution for a responsive web app where everything is fluid? I cannot get the div1 to go under the other, they always overlap. Or there is a more solid solution? Setting display: table-header-group; worked in the fiddle, but not in my project and I dont understand why. Doing it without CSS3 would be awesome.
Here is a fiddle
Thank you
I updated your fiddle
I added float:right; to both divs and i changed there order on the page like so:
<div id="amir">amir</div>
<div id="jake">jake</div>
and there is a second version when amir is on top here
You just have to swap the position of your HTML Divs as :
<div id="amir">Amir</div>
<div id="jake">Jake</div>
Here is the fiddle for you
Related
I'm making website for the first time and it's very hard for me on some simple tasks. Like right now I'm stuck at this problem. I have one div which floats left and another one which floats right. At some pages div at the left is bigger than div at the right, sometimes it's opposite.
I need one more div which stays at the bottom center no matter which (left or right) div is bigger. Right now I managed to do it work only if div at the left is bigger than div at the right.
Sorry it's confusing and hard to explain, the problem is probably positioning, but I can't figure out myself how to make it work.
In short: Need ID bottom to be at the bottom center, below other divs.
Forgot to mention: If I move divs, it messes up on different screen sizes.
<div id="bottom"><p>How to Make this text to be at the bottom center all the time?</p></div>
Example is here (check ID bottom): http://jsfiddle.net/ZMLyz/61/
#bottom
{
position:absolute;
width:100px;
margin-left:-50px;
bottom:20px;
left:50%;
}
well, the problem is not in css, but rather in the HTML.
You've placed the div id="bottom" within the "div style="float:left;" element. That is why the bottom bar appears to be flying in between. But in reality, it is exactly where you placed it, with the css doing exactly what it's supposed to.
Solution:
In your updated fiddle, please note lines 89 and 90 in HTML.
1. Line 89 is being used to clear float property for upcoming elements.
2. Line 90 is the bototm div.
As for the css, strting from line 15, I've made some changes but it's all the same before that line.
Give it a set width and set the margin to auto. This will center the div in its parent container. You also need to clear both left and right divs since your dealing with floats.
#bottom{
width:800px; /*make the width whatever you want*/
margin:auto;
clear:both;
}
Good Luck
Give style margin-top: Xpx
Here's the example: http://jsfiddle.net/ZMLyz/62/
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
I am attempting to build a responsive design from the ground up and using jsfiddle to do some testing. I have two outer columns with fixed widths and a central column that takes up the remaining width in between. I cannot for the life of me get the outer columns to expand to fill the height of the wrapper they are in. I think this may have something to do with how I got the middle div to take the central space (putting it after the right div in the order and then adding overflow:hidden).
I have tried clearing the floats with a div with clear:both on it and have also tried adding overflow:hidden to the wrapper.
The jsfiddle link is : http://jsfiddle.net/jleslie/ErAWn/1/
Any help would be much appreciated!
Don't use floats. You can keep it responsive with left and right absolute positions:
http://jsfiddle.net/ErAWn/4/
Applying this style to the side column works in Safari, Chrome and FF even though does not seem to work in jsfiddle, plus floating is preserved if you need it:
.side_col {
width: 200px;
background-color: red;
height: 100%;
}
Not a front-end UI but have a (probably) very easy problem to fix. Here is a jsfiddle of it: http://jsfiddle.net/trestles/U7mYT/ I have two floated elements shown in this screen shot. One is floated left and the other (index-right-content) is floated right. The floated right div has two columns of content. The second column is much longer but doesn't expand out the box to push down the container. The index-right-content is posistion:relative. The index-right-content is the blue dashed border.
thx
edit #1
fiddle of it: http://jsfiddle.net/trestles/U7mYT/
I think the issue is the 'index-box right' which is right floated needs some way to clear itself but adding a clear:both didn't seem to do it.
don't do this full-time so thx for any help
I don't know why you should use positioning for the div index-right-content. Also, the width is more than it should be... I think I see 640px for the width, which I think is unnecessary, provided that the widths of the columns inside this div is defined.
see the updated jsfiddle adding float to both inner columns in container.
I am working on a html page where I have a header div that contains two sub div's
link: http://jsbin.com/iladi4/3
I want to have a bottom-border for the header div but that border always keeps going on top. I want the border to be at the bottom.
Please see the link.
Add overflow: hidden to the #header. Demo at: JS Bin.
Add float:left in #header See the Demo
This is happening because the inner divs aren't actually in #header. By floating them you've removed them from the normal layout. Floating #header will fix that problem but may require other tweaks to get what you want.
You could also add a div below the nav div with style="clear: both;" this isn't pretty, but it works if for some reason you can't use either of the other two suggestions.