This question already has answers here:
CSS floats, change order on mobile layout?
(5 answers)
Closed 9 years ago.
I have two divs whereas (div 1) is floated left while (div 2) is floated right. I am creating a responsive layout where when the viewport changes, (div 1) will go under (div 2). I created a simple image via MS Paint for an easier illustration and also some code. Also, both contain dynamic content so their heights must not be fixed.
No javascript (if possible) just plain CSS. I only know how to put div 2 under div 1 but not the other way around.
Does anyone know how I could achieve this?
HTML:
<div id="div1 sidebar" style="float: left;">
//dynamic content
</div>
<div id="div2 content" style="float: right;">
//dynamic content
</div>
HTML is auto generated so in the markup, div1 originally comes first than div2. Not advisable to change the order (place div2 above div1) since many pages use the same layout. See code above
There is my proposition. Using media queries, find the largest width that you want your divto stay side by side.
In your html, place your div like this (the right one before):
<div class="div2">
div 2
</div>
<div class="div1">
div 1
</div>
The css used to display those div should look like this:
.div1 {
float: left;
width: 25%;
}
.div2 {
float: right;
width: 75%;
}
Finally, to display your left div below the right one, your should add in you css something like this:
#media all and (max-width: 480px) {
.div1, .div2 {
float: none;
display: block;
}
}
Here is a jsfiddle that demonstrate this coding. You only have to resize your browser to see your left div going right under your right one.
I would use a media query to change the CSS styles applied to each of those divs when the viewport is sized to where you want the change to occur. Then float div 1 to the right, float div 2 to the left and give div 2 a big enough right margin that it pushes div 1 down to the next row.
Related
I am trying to create a page with 2 divs side by side, that when the screen becomes too narrow to fit them both will put the second div below the first one, both centered on the screen. Is there a simple solution for this?
This is pretty simple standard css. Place 2 div's inside another div. Center both of them and set the width to a px size of your choosing. The divs will each be next to each other centered and if you adjust the screen size to not fit them both on one line, one will go beneath the other, still centered.
In the example below, click "full page" and just adjust the size of the screen to see how it will go onto the same line/go to next line depending if it fits or not.
#one, #two {
display: inline-block;
width: 400px;
height:300px;
border: 2px solid red;
}
<div align="center">
<div id="one" align="center">things</div>
<div id="two" align="center">more things</div>
</div>
I found this fairly simple with very little code. Place the two divs in a container. add display:inline-block; attribute to both divs inside the container and they will stack upon certain widths.
https://jsfiddle.net/Lg06c1sb/
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
I've captured an illustration of a CSS two-column layout I've set up, while using the following rule for the orange containers:
.embedded_post{
float: left;
width: 46%;
margin-right: 20px;
padding: 10px;
display: inline-block;
}
As can be seen, the second orange container on the right column is preventing the second orange container on the left column from floating up to the top left box.
This happens apparently since float:left automatically grants the element with a block level flow.
How can I get the second box on the left column to be positioned under the first one?
can you wrap your columns in another pair of divs, so that floating in the right column won't affect floating in the left?
<div id='left_column'>
<div class='embedded_post'></div>
<div class='embedded_post'></div>
</div>
<div id='right_column'>
<div class='embedded_post'></div>
<div class='embedded_post'></div>
<div class='embedded_post'></div>
</div>
css:
#left_column, #right_column {
float:left;
}
you've answered it yourself, there are a couple of options:
trick yourself by granting the div elements with an inline level flow, i.e. specifying display: inline (not recommended).
update the markup to be more semantic and alter the layout to conform to the desired result, e.g. replacing the divs with spans (preferred).
The second div on the left has less width than the rest of the divs, this might have something to do with it. Also, the combination with your (desired) structure and the margin-right isn't how I would do it. In fact, the margin-right may, depending on the with of the parent div of the embedded_post divs, screw up your structure and cause postioning problems.
It works fine when I try it.
p.s. keep in mind that in Firefox, the padding adds to the width/height of the div while this doesn't happen in other browsers.
Im trying to have a blueprint layout wich is 950px so I do something like the image below:
Like regular the 950px container ( right box ) is floating center page
Now I'm in the need of having a #menu div floating left towards this 950px box, it should be positioned left to this #container 950px div and have a fixed width.
How can such a thing be accomplished? I tried already several css tricks to no avail, i know there is liquid layout but then the space between #menu and #container will become to big I want that space to be fixed like in below example say 20px the blueprint default.
anyone knows how to make this happen and have the divs stay on page even when screen resizes?
if i understood your question this will do what you want:
body, html
{
width: 100%;
}
<div style="margin: 0 auto; width: 1100px">
<div style="width: 150px; float:left;">
menu
</div>
<div style="width: 950px; float:left;">
right part
</div>
</div>
I recently start to learn CSS and table less design.
After reviewing some tutorials now I am involved with converting PSD Mockup to XHTML and CSS.
Most often my problem is to positioning elements and containers.
for example this below design:
I am converting this to CSS and HTML.
I have no problem with styling Input elements.
about main layout it seems two columns layout , right ?
How do I style containers ?
I wrote this code It displays better here.
I divided my page to two containers and valued (float:left) to left container.
As specified in jsFiddle link elements on the left side container had come out of the box (I think its because of float).
I can't set containers position to absolute.
Now please help me to refactor and change my code. And please explain to me how to position elements right ?
i think a
<div style="clear:both;"></div>
before the </div> of the container will work.
edit:
http://jsfiddle.net/xNwAc/5/
Try and have a wrapping element to contain your two columns. with W3C code, you'll want to use floated elements. The elements don't have any padding, you can work on them yourself, but it's a very basic structure to follow:
The CSS:
#wrapper { width: 960px; margin: 0 auto; background: blue; } /* positions it center of page */
#left { float: left; width: 50%; background: red;}
#right { float: right; width: 50%; background: green;}
The HTML:
<div id="wrapper">
<div id="left"> Left content </div>
<div id="right"> Right content </div>
</div>
You have to set a new formating context on the container, with overflow:auto; eg.
I sugger you to read the specification which is very clear and useful.
As the exclamation point is not a part of the content you can place it as a background image.