.block {
display: table-cell;
margin: 5px auto;
background-color: grey;
width: 100px;
height: 100px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<div class="block"></div>
</div>
<div class="col-md-6">
<div class="block"></div>
</div>
It looks fine when I look in the large screen, but when I resize the window and they are stacked, then the two grey blocks will become one larger rectangular grey block. So how could I place spacing between them?
try to add margin to get this fixed..
css
.block{
margin:5px auto;
}
Related
Very silly question, but i can't understand...
In a row of small div elements some of my divs have different margin-right, even if i define same margin-right for all row items. I wonder what exactly fires this kind of action.
P.S. Thanks for reading, sorry for my bad english
.row{
display: flex;
}
.row__item{
width: 50px;
height: 20px;
margin-right: 1px;
background: red;
}
<div class="row">
<div class="row__item"></div>
<div class="row__item"></div>
<div class="row__item"></div>
<div class="row__item"></div>
<div class="row__item"></div>
<div class="row__item"></div>
</div>
margin is outside of element that's so normal for it to Not take background
Remove margin-right to get rid of that space
If you want your content to be spaced from each other and yet take the background, use padding instead
Padding box is a part of your element (breathing space between content-box and border-box)
And if you want the padding Not to add up with your element's (50px) width, the answer is box-sizing: border-box;
So if this wasn't what you mean and what you need, let me know
.row{
display: flex;
}
.row__item{
width: 50px;
height: 20px;
background: red;
}
<div class="row">
<div class="row__item"></div>
<div class="row__item"></div>
<div class="row__item"></div>
<div class="row__item"></div>
<div class="row__item"></div>
<div class="row__item"></div>
</div>
I have four divs laid out in a sequential order. I want each to take a corner of the page provided the content will fit, otherwise arrange sequentially vertically.
#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
text-align: center;
border: 1px solid black;
width: 50%;
}
#ppcontainer {
border: 1px solid black;
font-size: 120%;
min-height: 250px;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
overflow: auto;
}
<div id="ppcontainer">
<div id="pptopleft">#1</div>
<div id="pptopright">#2</div>
<div id="ppbottomleft">#3</div>
<div id="ppbottomright">#4</div>
</div>
If they can fit, I'd like them to each take 50% width of the parent container, but if they need to be stacked vertically, each should take 100% width. Something like the below:
//contents of each div will fit without wrapping
1 2
3 4
//contents of each div will not fit without wrapping
1
2
3
4
The latter maybe for smaller resolutions or mobile devices.
What can I do to achieve this using CSS?
Media queries could help with this. For example, add the following after your current CSS:
#media all and (max-width: 500px) {
#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
width: 100%;
}
}
Change the 500px to match whatever breakpoint you want, and set your existing divs to float: left.
Use Bootstrap: and structure your div as following
<div class="container-fluid">
<div class="row">
<div id="1" class="col-md-6"></div>
<div id="2" class="col-md-6"></div>
</div>
<div class="row">
<div id="3" class="col-md-6"></div>
<div id="4" class="col-md-6"></div>
</div>
</div>
How i can center div elements horizontally, so when i change the width of the browser, the last div go down with css?
So:
---||||-||||-||||---
--------||||--------
When i write:
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
...
</div>
</div>
Then after a element go down, all div elements go to the left side.
I would recommend using display: inline-block on the elements and then using text-align: center on the container to handle the centering you want:
I cleaned up your HTML but here is the basic HTML formatting with a container class and multiple (as many as you want) block class DIVs:
<div class="container">
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
</div>
The CSS modifies the display settings of the blocks and the text-alignment of the container:
div.block {
display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
width: 315px;
margin: 10px 0;
height: 340px;
}
div.container {
width: 100%;
text-align: center; /* this is the magic that centers the elements */
}
I put together a small demo that should help demonstrate this method: JSFIDDLE
Be Aware: a small 'quirk' exists with the display: inline-block CSS. it causes a small amount of space to occur between the elements. This can be removed multiple ways, my preferred methods being either using comments or wrapping the closing tags of the DIVs. (the issue is caused by the return/spaces between the elements in the HTML):
<div class="container">
<div class="block">Text</div><!--
--><div class="block">Text</div><!--
--><div class="block">Text</div>
</div>
<div class="container">
<div class="block">Text</div
><div class="block">Text</div
><div class="block">Text</div>
</div>
reference for the quirk behavior
Create a container <div> that is 100% of a given area. Then set each <div>'s width inside the container to be a % and float: left;. They'll stack next to each other until they do not fit and will break to the next line.
.container {
width: 100%;
}
.three {
width: 33%;
min-width: 225px;
float: left;
border: 1px solid black;
}
<div class="container">
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
</div>
Run the snippet.
You could use media queries to write different css code for different sizes:
Media Queries
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
I have structure like:
<style>
#main{
max-width: 500px;
margin: 0 auto;
overflow: hidden;
border: 1px solid red;
}
#container{
margin-right: -50px;
}
.block{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid grey;
margin-right: 30px;
}
</style>
<div id="main">
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
If I have wide width it looks like
http://i.stack.imgur.com/3I1yM.png
It's ok.
But if I use narrow it sucks
I need that internal bloks is aligned to center like this
http://i.stack.imgur.com/5GXMJ.png
Hi what you need here is the property text-align:center:
#container{
margin-right: -50px;
text-align:center;
}
The demo http://jsfiddle.net/u5HHc/
What about this?
http://jsfiddle.net/ALR8P/3/
Remove margin from blocks, user text-align justify and add word spacing if you want some fixed space for your blocks on the last row.
#container {
letter-spacing: 10px; //word-spacing: 10px; //to space blocks on last row
text-align: justify; //to align everything to the borders on the first lines
padding: 0px 10px; //to separate the blocks from the borders a little
}
.block {
margin-right: 0px;
}
It looks wrong when width is too small and only one block fits on each row but maybe there you need some media query to make your css responsive to fix that on that special case.
EDIT: letter-spacing works better crossbrowser http://jsfiddle.net/ALR8P/5/, you may want letter-spacing: 30px; since your margin was 30px