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;
}
}
Related
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/
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:
Say I have the following DIVs:
<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>
How can I use CSS to place the sidebar DIV to the right of the main DIV, and set it to, say, 20% of the total width?
I'd also like to have some margins between the four DIVs, so that the layout doesn't look too cramped.
Would like it to work in "all" browsers, including that bastard IE6...
put main and sidebar in the wrapper, you can set the size/location of wrapper and preserve your layout.
#top {
/* top stuff */
}
#wrapper {
width: 800px;
margin: 0px auto; /* centers on page */
}
#main {
float: left;
width: 80%;
margin-right: 10px;
}
#sidebar {
float: left; /* by floating left here you have a greater control over the margin */
width: 20%;
}
#bottom {
/* bottom stuff */
}
use floats, negative margins and padding.
you can find good tutorials on http://alistapart.com about page layouting (i really recommend the holy grail) and it also deals a lot with cross-browser problems
http://www.alistapart.com/articles/holygrail
Try:
html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */
#main { float: left; width: 80%; }
#sidebar { float: right; width: 20%; }
#bottom { clear: both; }
It's important for this kind of thing to use a reset CSS (there are others) as different browses have different default values for things like borders, margins and padding.
<div id="top">Page header</div>
<div id="main">
<div id="content">Main content</div>
<div id="sidebar">Sidebar content</div>
</div>
<div id="bottom">Page footer</div>
#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; }
#sidebar { float: right; width: 20%; }
#content { float: right; }
It's very very important that you set the doc type to strict, ala thusly:
If you do this, you wont need to clear your CSS (with a few exception) and can simply use the correct box models.
I will answer my own question with a link to this article which was exactly what I was looking for:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/