I'm wondering if there is a pure-css way of making divs change alignment when they flow past each other or "wrap" as the window resizes. Two divs on a single row, one floated left the other floated right. On smaller viewports they stack but retain their left and right alignment. I can center them on a media query like this fiddle: https://jsfiddle.net/vrac/gcuekarx/, but the media query isn't ideal because the left-box content is of variable length and thus setting a breakpoint for the media query is only a guess.
Cheers
Html:
<div id="nav_row">
<div id="left_box">Left box with variable content width xxxxxxxxxxxxx
</div>
<div id="right_box">Right box
</div>
</div>
CSS:
#nav_row {
background: blue;
display: table;
width: 100%;
position: relative;
}
#left_box {
background: red;
display: block;
float: left;
}
#right_box {
background: green;
display: block;
text-align: right;
float: right;
}
Media query:
#media (min-width: 250px) and (max-width: 400px) {
#nav_row {
background: yellow;
}
#left_box {
background: purple;
float: none;
text-align: center;
}
#right_box {
background: teal;
float: none;
text-align: center;
}
}
In my opinion the easiest way to change alignment is to use
FlexBox
It's so easy to change the 'wrap' using the flex-wrap.
You can see more here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I've been trying to achieve the layout below using flexbox. I originally had a left hand sidebar containing the image & navigation, and a main content area. On mobile, the sidebar used to wrap under the main content.
The problem with that is that I need the image to remain at the top on mobile, so I've been trying with three sibling divs in one wrapper div.
Is this even possible with flexbox or will I need to use css grid?
Although CSS Grid would be the best approach to achieve the lay-out you want, it is possible using CSS Flexbox.
You just have to create a wrapper div with three divs inside (when doing a mobile first approach) and with .content set to flex: 1 to stretch out the height of your viewport.
Then for desktop (in this case #media screen and (min-width: 1000px)), change the order (MDN reference of order) of .navigation and .content and give all three divs appropriate widths according to their needs. The only change to div.wrapper is that it needs flex-flow: column wrap to wrap correctly.
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
}
.box {
display: flex;
}
.content {
flex: 1;
}
#media screen and (min-width: 1000px) {
.wrapper {
flex-flow: column wrap;
}
.navigation {
order: 2;
}
.content {
order: 3;
}
.image,
.navigation {
width: 200px;
flex: 50%;
}
.content {
width: calc(100% - 200px);
flex: 0 0 100%;
}
}
/* Generic styling */
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.image {
background: orange;
height: 60px;
}
.content {
background: lightblue;
}
.navigation {
background: lightgreen;
height: 60px;
}
<div class="wrapper">
<div class="box image">Image</div>
<div class="box content">Content</div>
<div class="box navigation">Navigation</div>
</div>
I am trying to create a page layout with a header that needs to include 2 pieces of in information (which I have placed in two divs). On wider screens, I want to align one block to the left, and one to the right, but on smaller screens, I want to stack both blocks, and center all of the text.
So far, however, I have been unable to accomplish both of these goals. Is this even possible without resorting to JavaScript?
Here is the HTML I have so far:
<div class="container">
<div class="left">
Text on the left
</div>
<div class="right">
Text on the right
</div>
And the CSS:
.container {
padding: 0px;
}
.left {
display: inline-block;
float: left;
text-align: center;
}
.right {
display: inline-block;
float: right;
text-align: center;
}
I know that the float: left and float: right are what prevents the text from centering when stacked, but I don't know how else to make sure that the left and right blocks end up in the corners when they are not stacked.
It's a little hard to give a concrete answer as the question doesn't demonstrate the actual desired layout but is more general in its requirements. With that said, here's what I suggest.
I would set a width on your .left and .right DIVs along with using media queries to adjust for stacking behavior. I have two examples below.
1)
In this example both .left and .right are set to width: 50%. You could change it up to 40%/60% or whatever. The main takeaway here is they're both floated to the left so the widths will have to equal 100%;
<div class="container">
<div class="left">
Text on the left.
</div>
<div class="right">
Text on the right.
</div>
</div>
.container {
text-align: center;
}
#media (min-width: 400px) {
.left,
.right {
float: left;
width: 50%;
}
}
jsFiddle: http://jsfiddle.net/00ap8rnn/
2)
.container {
text-align: center;
}
#media (min-width: 400px) {
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 15%;
}
}
In this example both DIV widths do not have to equal 100% and one is floated to the right and the other floated to the left.
jsFiddel: http://jsfiddle.net/00ap8rnn/1/
I would use a media query to change the css at smaller screen widths. Ie, you could just change the .right div to float left instead at smaller screens widths:
#media (max-width: 600px){
.right{
float:left;
}
}
I need need to have each of my div's align to the edge of the main content div and stay on one line unless the dynamic content loaded is wider than a fixed width. Let's say 300px. I would like the main container to auto re-size according to content width with a margin of 20px on each side of the content. I want the content to go to automatically place it self on a new line if it exceeds the maximum width of the main container div. Here is my jsfiddle. I can't seem to get it to align correctly to the left or auto scale.
<div class='info_content'>
<div class='dealerName'><h3>{{dealerName}}</h3></div>
<div class='address'>{{address}}</div>
<div class='addressCont'>{{city}}, {{state}} {{zip}}</div>
<div class='telephone'><label for='phone'>Phone:</label>{{phone}}</div>
<div class='tags'><label for='Tags'>Tags:</label>{{tags}}</div>
<div class='dealerWebsite'><a href='{{href}}'>{{href}}</a></div>
</div>
CSS:
#DealerInfoContainer {
float: left;
margin-left: 50px;
max-width:400px;
height: auto;
border: 1px solid #000000;
}
#DealerInfo {
}
#DealerInfo p {
margin-top: -20px;
}
.telephone {
float: left;
}
.address {
float: left;
}
.addressCont {
float: left;
}
.tags {
float: left;
}
.dealerWebsite {
float: left;
}
.dealerName {
float: left;
}
.info_content {
width: 300px;
}
A different way, is to use display: inline-block on each div you want to float. like this this could be usefull if your content (as a can see) is variable
.inline{
display: inline-block;
}
If you want to use float:left, don't forget the clearfix at the end.
EDIT :
To make you code work, you must remove margin for the H3 and set a line-heigth with a vertical-align : jsfiddle
.clearfix{
clear:both;
}
.dealerName h3{
margin:0;
}
.align{
line-height :30px;
vertical-align: baseline;
}
For me the cleanest method is with display: inline-block.
Use this CSS:
div {float:left;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;}
It's compatible with all major browsers and does everything you want.
I want to have the following effect
2 divs, one on the left side of the screen, one on the right side of the screen, but when I resize the screen, when the same line is not big enough for both div, I want the second div jump to the next line, but it should appear on the most left side of the window instead, is this even possible?
For example let the divs be 200px width and height;
HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
html, body { padding: 0; margin: 0; }
.container {
width: 100%;
overflow: hidden;
}
.container div {
width: 200px;
height: 200px;
}
.left { float: left; background-color: blue; }
.right { float: right; background-color: green; }
/* The magic part */
#media (max-width: 399px) {
.right {
float: left;
}
}
Fiddle: http://jsfiddle.net/5m8Lj/
Take a look on CSS media queries like #reinder suggested
I have a regular layout that looks that this:
This layout is done using CSS floats.
When I switch to mobile, I want my layout to do this:
That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?
Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.
CSS:
#sidebar {
float: left;
width: 30%;
}
#content {
float: right;
width: 70%;
}
.mobile #sidebar,
.mobile #content {
float: none;
display: block;
margin-bottom: 15px;
}
Standard HTML:
<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Mobile HTML:
<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Media query, flex container and its order property should do the trick:
#media(max-width:767px) {
.container {
display: flex;
flex-wrap: wrap;
}
.content {
order: 1;
}
.sidebar {
order: 2;
}
}
Make sure to replace max-width value with your own mobile breakpoint.
Browser support for flex is also pretty decent now.
Assuming:
The two elements have a shared parent element
The content div appears BEFORE the sidebar in the source
You don't have to change the source order, you can achieve this with floats by default.
That is, in your desktop layout:
#content {
float: right;
width: 60%;
}
#sidebar {
float: left;
width: 40%;
}
Then, for mobile (using media queries or whatever other mechanism):
#content, #sidebar {
float: none;
clear: both;
}
Inside your mobile media queries set float:none.
Actually, I wanted to set layout like first layout so I had used:
.iconHome{
float: left;
border: 1px solid #73AD21;
width: 50%;
height: 100px;
background-color: aqua;
/*margin: 50px;*/
}
<div class="iconHome1">
</div>
<div class="iconHome1">
</div>
The result is the second layout!!!There fore, I think default "float:left" is not be set on mobile. You can use above way. Hope help you
Edit:
I tried some codes:
.iconHome1{
float: left;
border: 1px solid #73AD21;
width: 50%;/*185px*/
height: 200px;
background-color: aqua;
margin: 0;/*0 0 0 -7px*/
/*clear: left;*/
}
That means "width" & "margin" will effect to layout,although you have to set "float:left". Fix "width:49%", result: