This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(22 answers)
Closed 7 years ago.
Is there a way, without using bootstrap grid, to:
On larger devices
div.left left-aligned in .header-wrapper
div.right right-aligned in .header-wrapper
On small device
stack div.left and div.right on top of each other
JSfiddle
<div class="container">
<div class="header-wrapper">
<div class="left"> This is some longer text that may not fit in-line with buttons</div>
<div class="right">
<a type="button" class="btn btn-default">Table</a>
<a type="button" class="btn btn-default">Charts</a>
</div>
</div>
<p>Some content here</p>
<div class="header-wrapper">
<div class="in-line">
This would be an inline example
</div>
<div class="in-line">
Divs will stack without media queries
</div>
</div>
</div>
Is it possible without media queries?
for example using inline-block on .left .right would take care of stacking. (see inline-example in html code)
Is it possible to left/right align inline-block divs?
As everyone else has said, you need to use media queries.
Try this (obviously change sizes to your liking):
.header-wrapper { width: 100%; }
.header-wrapper > div { width: 200px; height: 50px; }
.left { background: blue; float: left; }
.right { background: red; float: right; }
#media screen and (max-width: 768px ) {
.right {
float:left;
clear: left;
}
}
On screens smaller than 769px, the box with class .right will get float: left; applied to it, which will cause it to, well, float left. The clear: left; will cause it to stack underneath the div with class .left.
I'm probably not groking what your'e saying, so I used a little flexbox and one media query, it looks like what I think you wanted. If not, let me know. BTW, I used to hate media queries because it's syntax was weird and smelled funny, but I came to the conclusion that they are here for a good reason.
http://jsfiddle.net/zer00ne/p7rbpuac/
Changes
.header-wrapper {
border: 1px solid green;
display: flex;
justify-content: space-between;
}
#media screen and (max-width:360px) {
.header-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
}
Related
I have a post grid layout that I'm trying to make responsive and am having some trouble figuring out the best approach for reorganising/reordering the content using CSS.
The original grid looks like this:
So an image on the left, that's the full height of the parent div (for which the recommendations are usually Flexbox or Absolute positioning), and then two rows in the second column for post content).
What I'm trying to figure out is the best way to code it so I can reorder the blocks to the layout below using CSS (i.e. keeping the HTML code/structure the same):
Essentially, I need to figure out the best way to move block 3 (the bottom "cell" in the second column) out of the second column and onto its own new row using CSS.
I've tried Flexbox, but can't make the structure work for both layouts. The first layout seems to require a nested column structure (the second column requiring its own div to dictate the flex-direction) and the second won't work if I have one (I can't "escape" the box 3 content from the column if it's hardcoded).
Same thing for a table layout, the HTML has to dictate what cell goes where/rows and columns.
The closest solution I have so far is three basic HTML divs, one on top of the other, and "absolute" positioning for box 1.
Basic HTML
<div class="container">
<div class="box-1">
<img=full-height-image>
</div>
<div class="box-2">
<post-title-and-meta>
</div>
<div class="box-3">
<post-excerpt-read-more>
</div>
</div>
Basic CSS (Desktop)
.container{
position: relative;
}
.box-1{
height: 100%;
position: absolute;
max-width: 33.333%;
}
.box-1 img{
height:100%;
object-fit:cover;
}
.box-2,
.box-3{
margin-left: 33.333%;
max-width: 66.666%;
}
Basic CSS (Responsive)
.container{
position: relative;
}
.box-1{
display: inline-block;
position: relative;
max-width: 33.333%;
}
.box-1 img{
height:100%;
object-fit:cover;
}
.box-2{
display: inline-block;
}
.box-3{
display:block;
margin-left:0;
max-width:100%;
}
But this doesn't seem like a particularly elegant/foolproof approach.
Based on what I need to do, and the "full height of parent div" image requirement, is there a better way to do this?
you can switch from a table display to a flex display (use mediaquerie to choose when to switch from a layout to another) .
absolute and object-fit can indeed be used for the image.
example of the idea :
div {
/* reset */
border: solid 1px;
box-sizing: border-box;
}
/* table-layout example , first box */
.container {
width: 80%;
margin: 0.25em auto;
display: table;
background: lightblue
}
.container .box-1 {
display: table-cell;/* no need to filter, once parent is flex, it doesn't matter*/
vertical-align: top;/* it won't disturb once a flex-child*/
width: 33%;
position: relative;
}
img {
position: absolute;
object-fit: cover;
height: 100%;
width: 100%;
}
div>div:last-child {
background: lightgreen
}
/* flex layout example, second box */
.bis {
display: flex;
flex-wrap: wrap;
}
.bis>div:nth-child(2) {
flex: 1;
background: tomato;
}
.bis>div:last-child {
min-width: 100%;
}
<div class="container">
<div class="box-1">
<img src=http://dummyimage.com/100>
</div>
<div class="box-2">
<h1>post-title-and-meta</h1>
</div>
<div class="box-3">
<p>post<br>excerpt</p>
<p>read-more</p>
</div>
</div>
<div class="container bis">
<div class="box-1">
<img src=http://dummyimage.com/100>
</div>
<div class="box-2">
<h1>post-title-and-meta</h1>
</div>
<div class="box-3">
<p>post<br>excerpt</p>
<p>read-more</p>
</div>
</div>
I have three images side by side in my web page and in the responsive CSS media query for mobile, I want the third image to be centered on the next line with the first two above it, one floating left, one floating right. I can't do it! How do I write this CSS?
You should share you code, but I'll try to help you even so.
<div class="main">
<div class="image-left"><img src=""></div>
<div class="image-right"><img src=""></div>
<div class="image-center"><img src=""></div>
</div>
CSS:
.main {
position: relative;
max-width: 100%;
}
.image-left {
float: left;
}
.image-center {
margin-top: 5%;
margin-left: 10% ;
position: absolute;
}
You need to adjust .image-center { margin-top and margin-left according to your layout.
If you need space between image-left and image-right, you add another class;
.image-right {
margin-left: 10px;
}
Let's say I have the following mark-up:
<style type="text/css">
.floatleft {
float: left;
}
.floatright {
float: right;
}
</style>
<div id="container">
<div id="box1" class="floatleft"></div>
<div id="box2" class="floatright"></div>
</div>
When I view this on a small screen on an iPad or iPhone etc. The two boxes will either:
Shrink (but stay next to each other) or
#box2 will "jump" down and position itself under #box1.
Q: How do I make #box2 jump down under the first <div />?
Use media queries and remove the floating on small sized screens.
Change #box2 to float: left; when on a mobile device, using a media query.
You just need to remove the property float with mediaqueries:
#media screen and (max-width:480px) {
#box1, #box2 {
float:none;
}
}
The demo http://jsfiddle.net/yYq8W/8/
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I'm trying to make a small username and password input box.
I would like to ask, how do you vertically align a div?
What I have is:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:
vertical-align: middle;
in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.
The best approach in modern browsers is to use flexbox:
#Login {
display: flex;
align-items: center;
}
Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.
Recommended Reading
Browser support
A Guide to Flexbox
Using CSS Flexible Boxes
This can be done with 3 lines of CSS and is compatible back to (and including) IE9:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Example: http://jsfiddle.net/cas07zq8/
credit
You can vertically align a div in another div. See this example on JSFiddle or consider the example below.
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
The .innerDiv's margin must be in this format: margin: auto *px;
[Where, * is your desired value.]
display: inline-flex is supported in the latest (updated/current version) browsers with HTML5 support.
It may not work in Internet Explorer :P :)
Always try to define a height for any vertically aligned div (i.e. innerDiv) to counter compatibility issues.
I'm pretty late to the party, but I came up with this myself and it's one of my favorite quick hacks for vertical alignment. It's crazy simple, and easy to understand what's going on.
You use the :before css attribute to insert a div into the beginning of the parent div, give it display:inline-block and vertical-align:middle and then give those same properties to the child div. Since vertical-align is for alignment along a line, those inline divs will be considered a line.
Make the :before div height:100%, and the child div will automatically follow and align in the middle of a very tall "line."
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Here's a fiddle to demonstrate what I'm talking about. The child div can be any height, and you never have to modify its margins/paddings.
And here's a more explanatory fiddle.
If you're not fond of :before, you can always manually put in a div.
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
And then just reassign .parent:before to .parent .before
If you know the height, you can use absolute positioning with a negative margin-top like so:
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
Otherwise, there's no real way to vertically center a div with just CSS
In my firefox and chrome work this:
CSS:
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
I found this site useful: http://www.vanseodesign.com/css/vertical-centering/
This worked for me:
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
#GáborNagy's comment on another post was the simplest solution I could find and worked like a charm for me, since he brought a jsfiddle I'm copying it here with a small addition:
CSS:
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
If you wish to also align it horizontally you'd have to add another div "inner-cell" inside the "cell" div, and give it this style:
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
Vertically aligning has always been tricky.
Here I have covered up some method of vertically aligning a div.
http://jsfiddle.net/3puHE/
HTML:
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
CSS:
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
http://jsfiddle.net/dvL512e7/
Unless the aligned div has fixed height, try using the following CSS to the aligned div:
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
I needed to specify min-height
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
if you are using fix height div than you can use padding-top according your design need.
or you can use top:50%. if we are using div than vertical align does not work so we use padding top or position according need.
simplest way to center your div element is to use this class with following properties.
.light {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Centering the child elements in a div. It works for all screen sizes
#parent {
background-color: red;
height: 160px;
display: flex;
/*vertical-align */
align-items: center;
/*horizontal align*/
justify-content: center;
}
#child {
background-color: orange;
height: 20px;
padding: 10px;
}
<div id="parent">
<div id="child">Content here</div>
</div>
I found a way that works great for me. The next script inserts an invisible image (same as bgcolor or a transparant gif) with height equal to half the size of the white-space on the screen. The effect is a perfect vertical-alignment.
Say you have a header div (height=100) and a footer div (height=50) and the content in the main div that you would like to align has a height of 300:
<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>");
</script>
You place the script just before the content that you want to align!
In my case the content I liked to align was an image (width=95%) with an aspect ratio of 100:85 (width:height).Meaning the height of the image is 85% of it's width. And the Width being 95% of the screenwidth.
I therefore used:
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
Combine this script with
<body onResize="window.location.href = window.location.href;">
and you have a smooth vertical alignment.
Hope this works for you too!
have you try this one?
.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}
hope this helps
divs can't be vertically aligned that way, you can however use margins or position:relative to modify its location.
I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.
Thanks for any help!
This works good for me. I have divided the screen into two halfs: 20% and 80%:
<div style="width: 20%; float:left">
#left content in here
</div>
<div style="width: 80%; float:right">
#right content in there
</div>
When you float those two divs, the content div collapses to zero height. Just add
<br style="clear:both;"/>
after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.
Another way to do this is to add overflow:hidden; to the parent element of the floated elements.
overflow:hidden will make the element grow to fit in floated elements.
This way, it can all be done in css rather than adding another html element.
None of the answers given answer the original question.
The question is how to separate a div into 2 columns using css.
All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.
So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...
.two-column-div {
column-count: 2;
}
assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.
The most flexible way to do this:
#content::after {
display:block;
content:"";
clear:both;
}
This acts exactly the same as appending the element to #content:
<br style="clear:both;"/>
but without actually adding an element. ::after is called a pseudo element. The only reason this is better than adding overflow:hidden; to #content is that you can have absolute positioned child elements overflow and still be visible. Also it will allow box-shadow's to still be visible.
For whatever reason I've never liked the clearing approaches, I rely on floats and percentage widths for things like this.
Here's something that works in simple cases:
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
If you put some content in you'll see that it works:
<div id="content">
<div id="left">
<div id="object1">some stuff</div>
<div id="object2">some more stuff</div>
</div>
<div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti</div>
</div>
</div>
You can see it here: http://cssdesk.com/d64uy
Make children divs inline-block and they will position side by side:
#content {
width: 500px;
height: 500px;
}
#left, #right {
display: inline-block;
width: 45%;
height: 100%;
}
See Demo
You can use flexbox to control the layout of your div element:
* { box-sizing: border-box; }
#content {
background-color: rgba(210, 210, 210, 0.5);
border: 1px solid #000;
padding: 0.5rem;
display: flex;
}
#left,
#right {
background-color: rgba(10, 10, 10, 0.5);
border: 1px solid #fff;
padding: 0.5rem;
flex-grow: 1;
color: #fff;
}
<div id="content">
<div id="left">
<div id="object1">lorem ipsum</div>
<div id="object2">dolor site amet</div>
</div>
<div id="right">
<div id="object3">lorem ipsum</div>
<div id="object4">dolor site amet</div>
</div>
</div>
Best way to divide a div vertically --
#parent {
margin: 0;
width: 100%;
}
.left {
float: left;
width: 60%;
}
.right {
overflow: hidden;
width: 40%;
}
Pure old school CSS
I know this post is old, but if any of you still looking for a simpler solution.
#container .left,
#container .right {
display: inline-block;
}
#container .left {
width: 20%;
float: left;
}
#container .right {
width: 80%;
float: right;
}
If you don't care old browser and need a simple way.
#content {
display: flex;
}
#left,
#right {
flex: 50%;
}
Floats don't affect the flow. What I tend to do is add a
<p class="extro" style="clear: both">possibly some content</p>
at the end of the 'wrapping div' (in this case content). I can justify this on a semantic basis by saying that such a paragraph might be needed. Another approach is to use a clearfix CSS:
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content {
display: inline-block;
}
/* \*/
* html #content {
height: 1%;
}
#content {
display: block;
}
/* */
The trickery with the comments is for cross-browser compatibility.
This is best answered here Question 211383
These days, any self-respecting person should be using the stated "micro-clearfix" approach of clearing floats.
Make font size equal to zero in parent DIV.
Set width % for each of child DIVs.
#content {
font-size: 0;
}
#content > div {
font-size: 16px;
width: 50%;
}
*In Safari you may need to set 49% to make it works.
Divide a division in two columns is very easy, just specify the width of your column better if you put this (like width:50%) and set the float:left for left column and float:right for right column.