I'm not sure how I can explain this the best.
but I'm working on a layout right now, and I've created an okay code.
However when I test the website the 3 DIV's I did create show up different in the mobile layout then in the PC layout.
Well here is the mobile code
.container1 {
margin: 5px auto;
width: 98%;
text-align:center;
}
.container1 > div {
width: 100%;
}
.col1 {
float: auto;
}
.col2 {
float: auto;
}
.col3 {
margin: auto;
}
div.panel {
width: 100%;
}
And this is the PC CODE
.container1 {
margin: 5px auto;
width: 98%;
text-align:center;
}
.container1 > div {
width: 33%;
}
.col1 {
float: left;
}
.col2 {
float: right;
}
.col3 {
margin: auto;
}
div.panel {
width: 100%;
}
HTML IS:
<div class="container1">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
However, the mobile version shows them as
Col1 - Col3 - Col2
So I'm not sure how to fix this that mobile also shows it as col1,col2,col3.
If I move the div, it doesn't show good in the PC version.
I hope someone can help out.
So, it are 3 div's horizontally aligned.
There is no float: auto. Simply make them all float: left in the mobile version. Then they will appear in the order they are in the HTML code.
Try this use display: flex; property to the parent element, and we have an property called order give to the child element with this we can achieve easily your requirement.
working codepen
Try this for the mobile:
.container1 {
margin: 5px auto;
width: 98%;
text-align:center;
}
.container1 > div {
width: 100%;
}
.col1 {
float: left;
}
.col2 {
float: left;
}
.col3 {
margin: auto;
}
div.panel {
width: 100%;
}
float have no auto property
in the end this is my CSS and HTML which is working
.card {
box-shadow: 0px 4px 8px 0px rgba(0,255,24,0.3);
transition: 0.3s;
float: left;
border-radius: 5px;
background-color:#111;
width: 97%;
}
.container1 {
padding-top: 5px;
margin: 0px auto;
width: 98%;
text-align:center;
}
.container1 > div {
width: 33%;
}
.col1 {
float: left;
}
.col2 {
float: right;
}
.col3 {
margin: auto;
}
div.panel {
width: 100%;
}
Also HTML:
<div class="container1">
<div class="col1 ">
<div class="card " id="left">
</div></div>
<div class="col3 ">
<div class="card " id="center">
</div></div>
<div class="col2 ">
<div class="card " id="right">
</div></div>
</div>
Related
I have divs that i want to wrap to the next line when the browser window gets smaller. I also want margin to be put in between the divs so that there's a gap between them. The problem I'm having is that the margin on the centre divs causes the divs to wrap incorrectly if the browser is set to a specific size. At a certain size you have 2 divs underneath one div. See my screenshot below as an example and this fiddle: http://jsfiddle.net/uhh2jwe2/ (change the width of the window)
This really needs to be dynamic as it will be a framework solution for laying out differently sized divs. The parent div will be fluid similar to the example. Any help would be great
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
You can use media queries to alter the css on smaller screen.
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#media (max-width: 435px) {
#outer > div {
margin-right:auto;
margin-left:auto;
margin-bottom:15px;
float:none;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
Use Media query like this:
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
I would recommend a solution that extracts the grid-elements from the content-elements. Therefore you have a lot more control about your layout and you can be more flexible with content you want to place into it.
Use your .inner elements as grid-elements and wrap content inside them into .inner-content
Wrap all inners into a row to get rid of the outer-gutter
Give the .inner elements a percentage-width and a px-max-width. So the elments can take alwyay 33.33% of the avaiable width but never more then 150px.
I added some adjustments for small screens, so the .inner elements wrap below each other and take more then 33.33% of the .outer container width.
Inspect the code: http://jsfiddle.net/uhh2jwe2/5/
* {
box-sizing: border-box;
}
/* flexible outer container */
.outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: hidden;
background-color: red;
}
/* remove outer gutter */
.row {
margin: 0 -10px;
}
/* .inner will take care of the width */
.inner {
width: 33.33%;
max-width: 150px;
float: left;
padding: 0 10px;
}
/* .inner-content take care of the height */
.inner-content {
height: 150px;
color: #fff;
background: blue;
}
#media (max-width: 435px) {
/* this wraps .inner elements below each other and extends width */
.outer .inner {
padding: 10px 0;
width: 100%;
max-width: 100%;
float:none;
}
}
<div class="outer">
<div class="row">
<div class="inner">
<div class="inner-content">1</div>
</div>
<div class="inner">
<div class="inner-content">2</div>
</div>
<div class="inner">
<div class="inner-content">3</div>
</div>
</div>
</div>
I would suggest to use bootstrap's technique for that. Have padding on both sides of your inner elements, and negate it with negative margin on the container.
This will require more markup tough. While .row and .container could be merge on the same element, the background-color would overflow to the left because of the negative margin.
.container {
background-color: green;
width: 510px;
}
.row {
font-size: 0;
margin: 0 -15px;
}
.block {
font-size: 12px;
padding: 0 15px;
display: inline-block;
}
.content {
width: 150px;
height: 150px;
background-color: red;
}
<div class="container">
<div class="row">
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
</div>
</div>
in your example, the first two divs are 170px wide (150+20), and the third is 150px wide because it doesn't have a margin, thats the problem.
avoid #media if you mant it to be fully responsive and not jumping from 4 items a line to 1 item a linefor example.
you can solve your issue by simply adding a margin-right:20 to your last element, but it is better to to like so :
.inner1, .inner2, .inner3{
float: left;
width: 150px;
height: 150px;
margin: 2px 10px; //left & right sides to half of 20px
background-color: blue;
}
because it will split the margin to the two sides, making it more symetrical.
For laying out differently sized divs.
if all your divs can change size but stay equal, it will work, but if the first div is 70 and the 2nd and 3rd are 50, there will always be two divs on the bottom line at some point.
I think I've found the simplest solution to what I'm trying to do without having to use media queries. I simply added the right margin to all fields including the last field rather than adding it to every field except the final field.
I then wrap all the fields in another div and add a minus margin (the same size as the gaps) so that the fields will wrap when they hit the side of the container. Here's a fiddle with the solution: http://jsfiddle.net/rahg1ky3/
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
#inner {
margin-right: -20px;
}
.cont {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
<div id="outer">
<div id = "inner">
<div class="cont">1</div>
<div class="cont">2</div>
<div class="cont">3</div>
</div>
</div>
I need to perform a dynamic grid system like this:
Each section is an article that contains an image, a title and a link/button to that article.
The problem is that each section is loaded dynamically and i only have the html of the section so i need to put each section on the correct position dynamically from the CSS. The one i know is that there are 5 sections.
The html code of each section and the container of all the sections is this:
<section class="scroll">
<!-- ARTICLES -->
<!-- ARTICLE -->
<div class="article-content">
<img class="article-image" src="${item.imgPath}" />
<div class="article-texts">
<h1 class="article-title">${item.title}</h1>
<a class="article-button" href="${item.link}.html" role="button">Read Article ></a>
</div>
</div>
<div class="clear"></div>
<!-- END ARTICLE -->
<!-- END ARTICLES -->
</section>
If you have control over the dimensions of your sections, you can use a fixed width container and float the sections inside that. Clear the float on the fourth section.
Example Fiddle: http://jsfiddle.net/abhitalks/mbuf9957/3/
Example Snippet:
* { box-sizing: border-box; padding: 0; margin:0; }
div { width: 380px; overflow: hidden; }
section { border: 1px solid #666; float: left; }
section:nth-child(1) { width: 240px; height: 240px; }
section:nth-child(2) { width: 120px; height: 120px; }
section:nth-child(3) { width: 120px; height: 120px; }
section:nth-child(4) { width: 120px; height: 120px; clear: left; }
section:nth-child(5) { width: 240px; height: 120px; }
<div>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
</div>
Since you have tagged this as CSS3, I think Flexbox would be an option. You could set display:flex on the parent and then have percentage widths for each box's flex-basis and set the flex-grow property to the amount of space, relative to other boxes, you want them to take up in the container and set flex-shrink to 0 since you don't need them to shrink.
CSS/HTML:
.grid-system {
/* Uncomment the next line to see the container */
/* border:1px solid black; */
}
.grid-system .box-width-2 {
border:1px solid black;
-webkit-flex:2 0 65%;
flex: 2 0 65%;
}
.grid-system .box-width-1 {
border:1px solid black;
-webkit-flex:1 0 32%;
flex: 1 0 32%;
}
.grid-system .box-height-2 {
-webkit-flex-grow:2;
flex-grow:2;
}
.grid-system .box-height-1 {
-webkit-flex-grow:1;
flex-grow:1;
}
.grid-system .flex-row {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row nowrap;
flex-flow:row nowrap;
-webkit-justify-content:flext-start;
justify-content:flex-start;
}
.grid-system .flex-column {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column nowrap;
flex-flow:column nowrap;
width:32%;
}
.grid-system .flex-row > div {
margin:0.5%
}
.grid-system .box-width-1.box-height-1 {
margin-bottom:0.5%;
-webkit-flex-grow:1;
flex-grow:1;
}
.grid-system .box-width-1.box-height-1.end {
margin-bottom:0px;
}
<div class="grid-system">
<div class="flex-row">
<div class="box-width-2 box-height-2">1</div>
<div class="flex-column">
<div class="box-width-1 box-height-1">2</div>
<div class="box-width-1 box-height-1 end">3</div>
</div>
</div>
<div class="flex-row">
<div class="box-width-1">4</div>
<div class="box-width-2">5</div>
</div>
</div>
jsFiddle
A solution only involving floats can reproduce your layout. Compatibility IE8+ (and even below but nobody cares). Pseudo-class :nth-child() (compat. IE9+) is used here to give an arbitrary width and height for demo, you'll have your own layout in real conditions.
* { box-sizing: border-box; }
div { width: 360px; }
section { border: 1px solid #666; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
section:nth-child(1) { width: 240px; height: 240px; }
section:nth-child(2) { width: 120px; height: 100px; }
section:nth-child(3) { width: 120px; height: 80px; }
section:nth-child(4) { width: 200px; height: 120px; }
section:nth-child(5) { width: 160px; height: 100px; }
<div>
<section class="left">1</section>
<section class="right">2</section>
<section class="right">3</section>
<section class="left clear">4</section>
<section class="right">5</section>
</div>
I'm trying to put 3 divs(with different widths respectively : 10%,70% & 20%) in the same row but the middle one always go full width of the page.
Here is my code:
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
By default div is a block level element that's why they aren't in the same row.
You have a few options to fix this:
option with CSS flexbox:
.row {
display: flex;
width: 100%
}
.row>div {
/*demo purposes */
height: 30px;
}
#left-bar {
flex: 0 10%;
background-color: #F00;
}
#middle-bar {
flex: 1;
background-color: #60F;
}
#right-bar {
flex: 0 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
(old options)
option with display:inline-block
.row {
/*fix inline-block gap*/
font-size: 0;
}
.row>div {
display: inline-block;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
option with display:table-[cell]
.row {
display: table;
width: 100%
}
.row>div {
display: table-cell;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
The table-cell option actually doesn't work in some internet explorer versions. But the same result can be achieved with the property float:
#left-bar{
width:10%;
background-color: #FF0000;
}
#middle-bar{
width:70%;
background-color: #6600FF;
}
#right-bar{
width:20%;
background-color: #99FF99;
}
.row > div {float:left;}
<div class="row">
<div id="left-bar">a</div>
<div id="middle-bar">b</div>
<div id="right-bar">c</div>
</div>
#left-bar{
width:10%;
background-color: #FF0000;
float:left;
}
#middle-bar{
width:70%;
background-color: #6600FF;
float:left;
}
#right-bar{
width:20%;
background-color: #99FF99;
float:left;
}
If that doesn't work, please provide more html and css because the problem will be somewhere else. Also, verify that you have heights set for your divs.
how can I make all divs get on the same line and fill div#2 the space between the left floated div#1 and right floated div#3?
Maybe flex will help you, here is an JSFiddle.
HTML
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
CSS
.parent {
display: -webkit-flex;
display: flex;
}
.div1 {
width: 30px;
height: 30px;
background: #FFCC99;
}
.div3 {
width: 30px;
height: 30px;
background: #FCF305;
}
.div2 {
-webkit-flex: auto;
flex: auto;
height: 30px;
background: #CCFFCC;
}
You could use display: table for this kind of implementation (note this is not using tables for layout):
html,
body {
margin: 0;
padding: 0;
}
.wrap {
display: table;
width: 100vw;
}
.one {
display: table-cell;
height: 50px;
width: 20%;
background: red;
}
.two {
display: table-cell;
height: 50%;
width: 60%;
background: cornflowerblue;
}
.three {
display: table-cell;
background: lime;
height: 50px;
}
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Notice how I haven't set a width on the last element, yet it's filling the rest of the space available?
Here's a dummy implementation:
<div id="l"></div>
<div id="r"></div>
<div id="c"></div>
<style>
#l {
float: left;
width:30%;
}
#r {
float: right;
width: 30%;
}
#c {
margin: 0 auto;
width: 40%;
}
</style>
For some reason, I can't seem to center this list element in the page. It contains three equally-sized boxes, and I'd like them to always stick to the center.
body {
width: 100%;
}
.boxes {
display: block;
margin: 0 auto;
}
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
}
.all {
float: right;
width: 100px;
height: 100px;
background: red;
margin: 10px 10px 10px 10px;
}
.clear {
clear: both;
}
<body>
<div class="box-container">
<div class="box1 all"></div>
<div class="box2 all"></div>
<div class="box3 all"></div>
<div class="clear"></div>
</div>
</body>
For margin: auto to work, your elements need to have a width given to them somehow (usually through width). The usual solution to make things scale automatically is display: inline-block; (though flexbox makes this much easier when supported):
.box-container {
display: inline-block;
text-align: left;
}
Then you’d give its parent text-align: center;. Alternatively, width: 300px; (with perhaps a minor adjustment or removal of spaces) seems like it could work well here; it depends on your actual layout.
body doesn’t need width: 100%;, by the way.
For everything you want to center horizontally, you should set its margin-left and margin-right to 'auto'.
Give your box container a width:
CSS
.box-container {
display: block;
margin: 0px auto;
width: 360px;
border: 1px solid blue;
}
Example here: http://jsfiddle.net/82WCU/
Remove the float: right from each the all class. That is causing the boxes to move to the right. Make the box-container center aligned (this will bring them to the center), and change the display of each box to inline-block.
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
text-align: center;
}
.all {
width: 100px;
height: 100px;
background: red;
margin: 10px 10px 10px 10px;
display: inline-block;
}
Try:
.box-container {
text-align:center;
}
.all {
display:inline-block;
}
NOTE:
inline-block leaves white-space between elements. To remove this space, write elements on same line rather than writing them on separate lines.
Change:
to
<div class="box-container">
<div class="box1 all"></div><div class="box2 all"></div><div class="box3 all"></div>
</div>
DEMO here.
Try This it work perfectly:
HTML
<body>
<div class="box-container">
<div class="box1 all"></div>
<div class="box2 all"></div>
<div class="box3 all"></div>
<div class="clear"></div>
</div>
</body>
css
body {
width: 100%;
}
.boxes {
display: block;
margin: 0 auto;
}
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
}
.all {
background: none repeat scroll 0 0 red;
float: right;
height: 100px;
margin-right: 13%;
width: 100px;
}
.clear {
clear: both;
}