I try to get a various number of divs side by side.
This number is will be dynamic.
But in total these divs should have the width of exactly 100% (not under, not over).
Is this possible and if so, how can I achieve this?
Something Like:
SCREEN SIZE
|<--------------------->|
(for 2 boxes:)
|-----------|-----------|
| | |
|-----------|-----------|
or
(for three boxes:)
|-------|-------|-------|
| | | |
|-------|-------|-------|
this jsFiddle shows you how you can achieve 3 boxes side by side. I've edited the css to being:
.left {
float:left;
width:50%;
border: 3px solid #333;
box-sizing: border-box;
background: #C0C0C0;
margin: 0;
}
which works (even after resizing),
and the html was:
<div class="left">...B1</div>
<div class="left">...B2</div>
See below for it in action:
.left {
float:left;
width:50%;
border: 3px solid #333;
box-sizing: border-box;
background: #C0C0C0;
margin: 0;
}
<div class="left">...B1</div>
<div class="left">...B2</div>
Try flex model, works like a charm!
html, body { height: 100%; width: 100%; }
.eqWrap { display: flex; }
.eq { padding: 10px; }
.eq:nth-of-type(odd) { background: yellow; }
.eq:nth-of-type(even) { background: lightblue; }
.equalHW { flex: 1; }
<div>
<h1>EQUAL WIDTH COLUMNS</h1>
<p>Add display:flex to the parent and flex:1 to the boxes</p>
<div class="equalHWrap eqWrap">
<div class="equalHW eq">boo <br> boo</div>
<div class="equalHW eq">shoo</div>
<div class="equalHW eq">shoo</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/SchweizerSchoggi/y7L698nq/
Related
I am trying to stack two elements that are full screen size on top of each other in html/css. I have the following html code so far
<div className="main">
<div className="intro">
<div className="intro__header">
Hello, world!
</div>
</div>
<div className="about">
</div>
</div>
I would like to have the "intro" section sit on top of the "about" section. (This will allow you to scroll back and fourth between sections) Both the "intro" and "about" sections will each take up the size of the full screen. For example, if the screen was 900px by 900px, both sections will be 900px by 900px that sit on top of each other.
So far I have the "intro" section take up 100% of the screen using the following css.
.intro {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
margin: 0;
}
How would I get the "about" section to also take up 100% of the screen but sit below the "intro" section
---------------
| intro |
| |
|_____________|
---------------
| about |
| |
|_____________|
The output would be the above with the "intro" section being 100% of the screen when you visit the page. Then you can scroll down to the "about" section.
You need to use the attribute class, not className.
After that is fixed, all you need to do is set the height of the first div, and maybe the margin of the body, which might already be covered if you have some kind of css reset.
100vh is a convenient value to use. You can use 100%, but that is relative to the container, so you would have to set the height of .main or of the body. 100vh simply means the height of the viewport:
.intro {
height: 100vh;
}
<div class="main">
<div class="intro">
<div class="intro__header">
Hello, world!
</div>
</div>
<div class="about">About section
</div>
</div>
You should be using class instead of className. className is JSX syntax, not HTML.
As to keeping each div centered depending on the viewport: set the height of each div to be 100vh. To demonstrate, I've added a border around each div.
In this case, the height is calculating to subtract the 5px top and 5px bottom border:
* {
margin: 0;
}
.intro {
height: calc(100vh - 10px);
border: 5px solid red;
}
.about {
height: calc(100vh - 10px);
border: 5px solid blue;
}
<div class="main">
<div class="intro">
Intro
</div>
<div class="about">
About
</div>
</div>
or you can use border-box to prevent having to calculate the border size:
* {
margin: 0;
}
.intro {
height: 100vh;
border: 5px solid red;
box-sizing: border-box;
}
.about {
height: 100vh;
border: 5px solid blue;
box-sizing: border-box;
}
<div class="main">
<div class="intro">
Intro
</div>
<div class="about">
About
</div>
</div>
You can also use percentages to accomplish the same thing, but there are a few caveats to this approach. With percentages, it will be determined based off of the sizing of the parent element. In this case, I set the global selector * to have a height of 100%, so it will work the same way, but only because the parent element is 100% of the viewport (or 100vh).
* {
margin: 0;
height: 100%;
}
.intro {
height: 100%;
border: 5px solid red;
box-sizing: border-box;
}
.about {
height: 100%;
border: 5px solid blue;
box-sizing: border-box;
}
<div class="main">
<div class="intro">
Intro
</div>
<div class="about">
About
</div>
</div>
If you change the parent element from 100% to 50%, you can see why vh is a much better unit than a percentage:
* {
margin: 0;
height: 50%;
}
.intro {
height: 100%;
border: 5px solid red;
box-sizing: border-box;
}
.about {
height: 100%;
border: 5px solid blue;
box-sizing: border-box;
}
<div class="main">
<div class="intro">
Intro
</div>
<div class="about">
About
</div>
</div>
height: 100vh and width: 100vw work quite well.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.full-page {
height: 100vh;
width: 100vw;
padding: 20px;
}
.intro {
background: orange;
}
.about {
background: yellow;
}
<div class="main">
<div class="intro full-page">
<h2>Hello, world!</h2>
</div>
<div class="about full-page">
<h2>About page</h2>
</div>
</div>
You can use this code in your css file:
.intro, .about{height: 100vh;}
This question already has answers here:
Two column layout with left fluid and right fill the rest width
(4 answers)
Closed 6 years ago.
I need to do a layout in this way:
----------------------
| header |
----------------------
| N | |
| A | CONTENT |
| V | |
|-----| |
| | ----BAR---- |
|EMPTY| |
| | |
----------------------
I want the overall width to be 100% of the body,
the navigation has width 15% but min-width 120px.
The width of the bar (that is an element in the content div) has to be 100% of the content div.
In the html I have the limitation that the navigation div has to go before the content div.
EDIT:
My code in the html is
<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div id="content><p id="bar">Title of paragraph</p></div>
</div>
The code i have in the css right now is:
#nav {
float: left;
width: 15%;
min-width: 120px;
}
#content{
float: right;
}
#bar {
display: block;
background-color: #D2DEE4;
}
Could you help me please?
I like the flexbox method more, however keep in mind this doesn't work with IE9 and below.
Flex-basis (aka flex: {shrink} {grow} {flex-basis}) is required because flex doesn't work well with css widths.
*{
margin: 0;
padding: 0;
}
header{
padding: 10px;
width: 100%;
background: #888;
}
.sidebar{
padding: 10px;
flex: 0 0 120px;
background: #07f;
}
.content{
padding: 10px;
background: #ddd;
width: 100%;
}
.container{
display: flex;
flex-direction: row;
}
<header>
This is the header
</header>
<div class="container">
<div class="sidebar">
This is the sidebar
</div>
<div class="content">
This is the content
<br>
test
</div>
</div>
This method is static and doesn't allow for percentages (you'd have to use media queries for other screen sizes.)
*{
margin: 0;
padding: 0;
}
header{
padding: 10px;
width: 100%;
background: #888;
}
.sidebar{
box-sizing: border-box;
float:left;
background: #06f;
display:block;
width: 120px;
padding: 10px;
}
.content{
box-sizing: border-box;
padding: 10px;
display:block;
background:#ddd;
margin-left: 120px;
}
<header>This is the header</header>
<div class="sidebar">
This is the sidebar
</div>
<div class="content">
This is the content
<br>
test
<br>
test
<br>
test
</div>
Is there a way to achieve the following behavior in css/html :
Please note the green side bar has not to be responsive but I cannot give it a fixed width with
width: XX px;
because it can contain more or less elements, so no idea of XX in advance.
The brown bar has to be responsive and takes all the remaining width.
Thanks in advance for any trick! I have tried tables but with no success as we can't specify a div to restrict its with to what is necessary.
You can achieve that easily with flexbox. Here's the example:
http://codepen.io/anon/pen/JKXXNE
#container {
display:flex;
}
#sidebar, #content {
height: 100px;
}
#sidebar {
background-color: green;
}
#content {
background-color: brown;
flex: 1;
}
You can use Flexbox, and if you set flex: 1 on right div it will take rest of free space and width of left div will still be dynamic.
.parent {
display: flex;
border: 2px solid black;
}
.left {
background: #22B14C;
padding: 10px;
}
.right {
background: #EFE4B0;
padding: 10px;
flex: 1;
}
span {
margin: 0 20px;
}
<div class="parent">
<div class="left"><span>Span</span><span>Span</span></div>
<div class="right">Right</div>
</div>
This can also be done with CSS Table layout you just need to set width: 100% on .right div and it will take rest of free space
.parent {
display: table;
border: 2px solid black;
}
.left {
background: #22B14C;
display: table-cell;
padding: 10px;
}
.right {
background: #EFE4B0;
display: table-cell;
width: 100%;
padding: 10px;
}
span {
margin: 0 20px;
}
<div class="parent">
<div class="left"><span>Span</span><span>Span</span></div>
<div class="right">Right</div>
</div>
For older browsers, use display: table
html, body{
height: 100%;
margin: 0;
}
.tbl{
display:table;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
}
.content{
width: 100%;
}
#left_col {
background: orange none repeat scroll 0 0;
width: 1%;
}
#right_col {
background: green none repeat scroll 0 0;
width: 100%;
}
<div class="tbl content">
<div class="row">
<div id="left_col" class="cell">
wide content <br>
content <br>
wider contentcontent <br>
</div>
<div id="right_col" class="cell"></div>
</div>
</div>
Another way to achieve this without using flexbox can be:
Working Fiddle:
https://jsfiddle.net/y00e5w6m/
(Note i have used sample css and input just to showcase how this can be done. This should be tuned a bit according to requirements)
Sample Output:
Html:
<div style="float:left;width:100%;border:1px solid #000;">
<div id="dynamic-content" style="float:left;background-color:#090;border:1px solid #900">
<div style="float;left;">
Mango
</div>
<div style="float;left;margin-left:5px;">
Banana
</div>
<div style="float;left;margin-left:5px">
Orange
</div>
</div>
<div id="other-content" style="float:left;background-color:#630;border:1px solid #009;">
</div>
</div>
JS:
var items=["mango","grapes","banana"];
var windowWidth = $(window).width();
console.log(windowWidth);
var dynamicContentWidth = $("#dynamic-content").width();
console.log(dynamicContentWidth);
var otherContentWidth = dynamicContentWidth >= windowWidth ? windowWidth : windowWidth-dynamicContentWidth-20;
console.log(otherContentWidth);
$("#other-content").width(otherContentWidth);
$("#other-content").height($("#dynamic-content").height());
Is it possible to make a multi row div? Just a 2 basic rows .
I have been able to make a static example of what I am looking for. However I'm not too sure how I would make this responsive. Using percents % with current css doesn't work.
HTML
<div class='wrap'>
<div class = "blocks">
div 1
</div>
<div class = "blocks">
div 2
</div>
<div class = "blocks">
div 3
</div>
<div class = "blocks">
div 4
</div>
</div>
CSS
.blocks {display: inline-block; border: solid 1px red; width: 100px;}
.wrap{
width:210px;
border: solid 1px black;
}
I think you're looking for something like this :
.blocks {
display: block;
float: left;
border: solid 1px red;
width: 25%;
box-sizing : border-box
}
.wrap {
width:400px;
padding: 1px;
border: solid 1px black;
}
.wrap:before,
.wrap:after {
content: "";
display: table;
}
.wrap:after {
clear: both;
}
#media (max-width: 800px) {
.blocks {
width:50%;
}
}
#media (max-width: 400px) {
.blocks {
width:100%;
}
.wrap {
width:100%;
}
}
<div class='wrap'>
<div class = "blocks">
div 1
</div>
<div class = "blocks">
div 2
</div>
<div class = "blocks">
div 3
</div>
<div class = "blocks">
div 4
</div>
</div>
(see also this Fiddle)
If you want to use percentage values for your block widths, you have to make sure that there is no blank between the blocks (1) and that the borders and paddings of your blocks are included in the percentage (2).
.blocks {
width: 50%;
float: left; /* (1) */
box-sizing: border-box; /* (2) */
border: 1px solid red;
}
For adding margin between two blocks, you have to give the margin in % and make sure that two blocks width and the margin add up to 100%. I created an example on JSFiddle.
You should use this: http://getbootstrap.com/css/#grid. The grid will help you create multiple columns on a row.
However if you want use custom css then:
.wrap{
width:100%;
clear:both;
border: solid 1px black;
}
.blocks {
width:25%;border: 1px solid red;
}
I need to display left and right borders padded 10px away from left and right edges of the centered text. There's no problem when the all text fits into one line, but when text takes up multiple lines the wrapping inline-block element stretches to 100% of it's container width.
I need a pure CSS solution.
Here's JSFiddle with working demo of the problem: https://jsfiddle.net/k8wrbctr/
Here's HTML:
<div class="container">
<div class="borders-wrapper"><span>The title</span></div>
<div class="borders-wrapper"><span>The title that takes up multiple lines</span></div>
</div>
Here's CSS:
.container {
width: 200px;
text-align: center;
background-color: #ddd;
}
.borders-wrapper {
display: inline-block;
border-left: 2px solid black;
border-right: 2px solid black;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
Here's the result:
| The title |
| The title that takes up |
| multiple lines |
And here's what I want to achieve:
| The title |
| The title that takes up |
| multiple lines |
I need to display left and right borders padded 10px away from left
and right edges
You need to give margins not padding for that.
when text takes up multiple lines the wrapping inline-block element
stretches to 100% of it's container width
That is because the content is long and the div will stretch as far as it can (upto parent width) to accommodate the content before it wraps to the next line.
There is another problem with your div being inline-block - if the content is less then the next div will start just right after the first one and not on its own line.
Solution (Keeping the div as inline-block):
Use a pseudo-element to break the line.
* { box-sizing: border-box; }
.container {
width: 200px;
text-align: center;
background-color: #ddd;
}
.borders-wrapper {
display: inline-block;
border-left: 2px solid black;
border-right: 2px solid black;
padding: 0px 10px; margin: 10px;
}
.borders-wrapper::after {
content:"\A"; white-space:pre;
}
<div class="container">
<div class="borders-wrapper"><span>The title</span></div>
<div class="borders-wrapper"><span>The title that</span></div>
<div class="borders-wrapper"><span>The title that takes up multiple lines</span></div>
</div>
Note:
Thanks #Kaiido for pointing it out. The pseudo-element trick won't work with its element being inline-block. In order for it to work, you do your padding/margin on the span, and float the divs. Then use transform trick to center it. A little more complicated.
Example:
* { box-sizing: border-box; }
.container {
width: 200px;
text-align: center;
background-color: #ddd;
}
.borders-wrapper {
float: left; clear: left;
position: relative; left: 50%;
transform: translateX(-50%);
margin: 0px auto;
}
.borders-wrapper > span {
display: inline-block;
padding: 0px 10px; margin: 10px;
border-left: 2px solid black;
border-right: 2px solid black;
}
.container:after { content:''; display:block; clear: both; }
.div2 { width: 400px; }
<div class="container">
<div class="borders-wrapper"><span>The title</span></div>
<div class="borders-wrapper"><span>The title that</span></div>
<div class="borders-wrapper"><span>The title that takes up multiple lines</span></div>
</div>
<br />
<div class="container div2">
<div class="borders-wrapper"><span>The title</span></div>
<div class="borders-wrapper"><span>The title that</span></div>
<div class="borders-wrapper"><span>The really long title that takes up multiple lines in a large width</span></div>
</div>