I am trying to do a 3-column layout and was wondering why the blue (right) column wraps around. This works fine in IE but fails to work in Chrome (30.0.1599.101m)
http://jsfiddle.net/V85JF/
HTML
<body>
<div class="top">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
</body>
CSS
body
{
height:100%;
margin:0;
background:gray;
}
.top
{
width:225px;
height:200px;
background:black;
}
.left
{
width:75px;
height:200px;
background:Red;
float:left;
display:inline-block;
}
.center
{
width:75px;
height:200px;
background:green;
float:none;
display:inline-block;
}
.right
{
width:75px;
height:200px;
background:Blue;
float:right;
display:inline-block;
}
EDIT
I need the center element to have fluid height. Top should take whatever height center takes.
Use float:left for .center and .right as well.
For fluid height, keep min-height:200px of .center.
Try this:
.top{overflow:hidden;}
.left,.center,.right{float:left;}
.center{min-height:220px;}
Fiddle here.
jsFiddle demo
Html
<body>
<div class="top">
<div class="left">
</div><div class="center">
</div><div class="right">
</div>
</div>
</body>
CSS
body
{
height:100%;
margin:0;
padding:0;
background:gray;
}
.top
{
width:225px;
height:auto;
background:black;
}
.left
{
width:75px;
height:200px;
background:Red;
display:inline-block;
}
.center
{
width:75px;
height:570px;
background:green;
display:inline-block;
clear:both;
}
.right
{
width:75px;
height:200px;
background:Blue;
display:inline-block;
}
Try this
This Layout is Fluid
Fiddle DEMO
CSS
body
{
height:100%;
margin:0;
background:gray;
}
.top
{
width:100%;
height:200px;
background:black;
}
.left
{
width:20%;
height:200px;
background:Red;
float:left;
display:inline-block;
}
.center
{
width:60%;
height:200px;
background:green;
float:left;
display:inline-block;
}
.right
{
width:20%
height:200px;
background:Blue;
float:right;
display:inline-block;
}
Related
With my current code, how do I make the purple div stick to the left side of the green div? I tried float:left which didn't work. I got close when adding position:absolute; and left:50%; to my purple div class but when the screen resized the div fell off screen. Is there a quick way to float the purple div to the left of the green one so it's not in the center?
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display:flex;
}
#logo {
left:0px;
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="logo"></div>
</div>
</div>
Try like this.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display:flex;
}
#logo {
left:0px;
width: 100%;
margin:auto;
margin-left: 0;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="logo"></div>
</div>
</div>
I'm trying to achieve two different looks based on browser resolution only with CSS. The first fiddle works perfectly besides the weird space due to the rows needing to be the same size:
HTML:
<div id="box-container">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
Mobile:
https://jsfiddle.net/c1xLqmdc/4/
CSS:
#box-container{
display:flex;
flex-flow: wrap;
}
#box1{
background-color:cyan;
width:50%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:50%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:50%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:50%;
height:150px;
order:4;
}
#box1,#box2,#box3,#box4{
width:100%;
}
Desktop:
https://jsfiddle.net/c1xLqmdc/
CSS:
#box-container{
display:flex;
flex-flow: wrap;
}
#box1{
background-color:cyan;
width:50%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:50%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:50%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:50%;
height:150px;
order:4;
}
/*#box1,#box2,#box3,#box4{
width:100%;
}*/
So I tried switching to columns to fix the gap, and now it works perfectly for desktop but they are in the wrong order for mobile.
HTML:
<div id="box-container">
<div id="box-column-left">
<div id="box1"></div>
<div id="box3"></div>
</div>
<div id="box-column-right">
<div id="box2"></div>
<div id="box4"></div>
</div>
</div>
Mobile:
https://jsfiddle.net/ar90Ly20/2/
CSS:
#box-container{
display:flex;
flex-flow:row wrap;
}
#box-column-left{
width:100%;
}
#box-column-right{
width:100%;
}
#box1{
background-color:cyan;
width:100%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:100%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:100%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:100%;
height:150px;
order:4;
}
Desktop:
https://jsfiddle.net/ar90Ly20/
CSS:
#box-container{
display:flex;
flex-flow:row wrap;
}
#box-column-left{
width:50%;
}
#box-column-right{
width:50%;
}
#box1{
background-color:cyan;
width:100%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:100%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:100%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:100%;
height:150px;
order:4;
}
Is this possible to accomplish the first mobile example, and the second desktop example without changing the HTML?
The simple solution would be to just offset the top margin for box 4.
FIDDLE
HTML:
<div id="box-container">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
CSS:
#box-container{
display:flex;
flex-flow: wrap;
}
#box1{
background-color:cyan;
width:50%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:50%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:50%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:50%;
height:150px;
margin-top: -50px;
order:4;
}
#media screen and (max-width: 425px) {
#box-container{
flex-flow: row wrap;
}
#box4{
margin-top: 0px;
}
#box1,#box2,#box3,#box4{
width:100%;
}
}
I want right and left side divs to be fixed in position with class main-wrapper in line with blue color box...Right now its taking top position with the header.Want it to be floating fixed not absolute.it shoulds tick to the main-wrapper.position top:0 to main-wrapper.Tried almost everything not working.
below is the code:
.header{
width:500px;
margin:0 auto;
background:red;
height:300px;
}
.container{
margin:20px auto;
background:blue;
height:1000px;
width:500px;
}
.header-wrapper,.main-wrapper{
width:100%;
}
.main-wrapper{
position:relative;
}
.left-ad,.right-ad{
width:100px;
height:250px;
background:pink;
position:fixed;
}
.left-ad{
left:0;
top:0;
}
.right-ad{
right:0;
top:0;
}
<div class="header-wrapper">
<div class="header">
</div>
</div>
<div class="main-wrapper">
<div class="left-ad">
</div>
<div class="right-ad">
</div>
<div class="container">
</div>
</div>
Applied position:sticky property to make left and right div to be position fixed absolute.Position Property
<div class="header-wrapper">
<div class="header">
</div>
</div>
<div class="main-wrapper">
<div class="left-ad">
</div>
<div class="right-ad">
</div>
<div class="container">
</div>
</div>
`.header {
width:500px;
margin:0 auto;
background:red;
height:500px;
}
.container {
margin:20px auto;
background:blue;
height:1000px;
width:500px;
}
.header-wrapper, .main-wrapper {
width:100%;
}
.main-wrapper {
position:relative;
}
.left-ad, .right-ad {
position: sticky;
width:100px;
height:250px;
background:pink;
}
.left-ad {float:left; left:0; top:0; }
.right-ad {float:right; right:0; top:0; }`
Is this you want ??
Add top value to the .left-ad,.right-ad selector.
.header{
width:500px;
margin:0 auto;
background:red;
height:300px;
}
.container{
margin:20px auto;
background:blue;
height:1000px;
width:500px;
}
.header-wrapper,.main-wrapper{
width:100%;
}
.main-wrapper{
position:relative;
}
.left-ad,.right-ad{
width:100px;
height:250px;
background:pink;
position:fixed;
}
.left-ad{
left:0;
top:328px;
}
.right-ad{
right:0;
top:328px;
}
<div class="header-wrapper">
<div class="header">
</div>
</div>
<div class="main-wrapper">
<div class="left-ad">
</div>
<div class="right-ad">
</div>
<div class="container">
</div>
</div>
See my codepen: http://codepen.io/Chiz/pen/zBWzZB
I want the UL list to be inside the white area on the left side, but for some reason, when I add the UL, it seems to go way out of the white area.
When I remove the UL tag, though, it looks good.
*
{
box-sizing:border-box;
}
body
{
background: linear-gradient(to right, #f4f4f4 0%,#848484 80%);
}
.container
{
width:100%;
height:100vh;
position:relative;
}
.card
{
width:70%;
height:500px;
background-color:rgb(250,250,250);
padding:0;
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
transform:translateY(-50%);
}
.card .left
{
width:70%;
height:100%;
background-color:rgb(250,250,250);
display:inline-block;
padding:0;
margin:0;
}
.card .left .leftcontentbox
{
width:75%;
height:90%;
border:1px solid red;
margin:0 auto;
}
.card .left .leftcontentbox .topnav
{
width:100%;
border:1px solid black;
}
.topnav ul li
{
display:inline-block;
}
.card .right
{
width:29.55%;
height:100%;
background-color:#b6e6f2;
display:inline-block;
padding:0;
margin:0;
}
<div class="container">
<div class="card">
<div class="left">
<div class="leftcontentbox">
<div class="topnav">
<img src=""></src>
<ul>
<li>Articles</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="headertext">
</div>
<div class="latestarticles">
</div>
</div>
</div>
<div class="right">
</div>
</div>
</div>
Add a float left to your left card class and a float right to your right card class, here's what i did :
{
box-sizing:border-box;
}
body
{
background: linear-gradient(to right, #f4f4f4 0%,#848484 80%);
}
.container
{
width:100%;
height:100vh;
position:relative;
}
.card
{
width:70%;
height:500px;
background-color:rgb(250,250,250);
padding:0;
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
transform:translateY(-50%);
}
.card .left
{
width:70%;
height:100%;
background-color:rgb(250,250,250);
display:inline-block;
padding:0;
margin:0;
float: left;
}
.card .left .leftcontentbox
{
width:75%;
height:90%;
border:1px solid red;
margin:0 auto;
}
.card .left .leftcontentbox .topnav
{
width:100%;
border:1px solid black;
}
.topnav ul li
{
display:inline-block;
}
.card .right
{
width:29.55%;
height:100%;
background-color:#b6e6f2;
display:inline-block;
padding:0;
margin:0;
float : right;
}
Changing display:inline-block to float:left at .card .left and float:right at .card .right.
Since we have used float on .left and .right. We need to reset the float by adding .fixit class to parent class(.card) of .left and .right
Note: .fixit class code is also included in the CSS
.fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}
*
{
box-sizing:border-box;
}
.fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}
body
{
background: linear-gradient(to right, #f4f4f4 0%,#848484 80%);
}
.container
{
width:100%;
height:100vh;
position:relative;
}
.card
{
width:70%;
height:500px;
background-color:rgb(250,250,250);
padding:0;
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
transform:translateY(-50%);
}
.card .left
{
width:70%;
height:100%;
background-color:rgb(250,250,250);
float:left;
padding:0;
margin:0;
}
.card .left .leftcontentbox
{
width:75%;
height:90%;
border:1px solid red;
margin:0 auto;
}
.card .left .leftcontentbox .topnav
{
width:100%;
border:1px solid black;
}
.topnav ul li
{
display:inline-block;
}
.card .right
{
width:29.55%;
height:100%;
background-color:#b6e6f2;
float:right;
padding:0;
margin:0;
}
<div class="container">
<div class="card fixit">
<div class="left">
<div class="leftcontentbox">
<div class="topnav">
<img src=""></src>
<ul>
<li>Articles</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="headertext">
</div>
<div class="latestarticles">
</div>
</div>
</div>
<div class="right">
</div>
</div>
</div>
I am able to make a horizontally scrolling div using the following:
CSS
.scroll {
width:100%;
height:100px;
overflow-x:auto;
white-space:nowrap;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}
HTML
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
However, once this is nested inside a div with display:table, the .scroll div no longer scrolls and instead stretches the .scroll div to show all of the boxes.
Pretty sure there's an easy fix for this, any ideas?
For reference: http://jsbin.com/makigome/29/edit?html,css,output
Try this CSS, hope it helps
.table {
display: block;
width:100%;
}
.table-cell {
display:block;
width:100%;
}
.scroll {
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}
Is not possible using table and table cell, you can do it using float like this:
.table {
float:left;
width:100%;
}
.table-cell {
float:left;
width:100%;
}
.scroll {
clear:both;
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}
For anyone interested, I fixed this by setting position:absolute to the .scroll div and wrapping it within another div with position:relative like so:
http://jsbin.com/makigome/39/edit?html,css,output
<div class="table">
<div class="table-cell">
<div class="scroll-wrapper">
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
</div>
.table {
display:table;
width:100%;
}
.table-cell {
display:table-cell;
width:100%;
}
.scroll-wrapper {
height:100px;
position:relative;
}
.scroll {
height:100%;
width:100%;
overflow-x:auto;
white-space:nowrap;
position:absolute;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}