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>
Related
I need the yellow div to float beside the the purple square. Orange on top, pink on the bottom and yellow to the left of the square. It worked when I took off the flex-wrap:wrap; from the right div but then all three divs went to the left. Is there anyway to just have the yellow div float to the right of the purple square to take up the remainder of the green area while the other two stay in their current spots?
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;
flex-direction: column;
}
#right>* {
flex: 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
margin-left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
}
#rightsidebottom{
background-color:pink;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div id="logo"></div>
<div id="rightsideright"></div>
<div id="rightsidebottom"></div>
</div>
</div>
This should work as intended.
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;
flex-direction: column;
}
#right>* {
flex: 1;
}
#logo {
width: 100%;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
flex: 1;
}
#rightsidebottom{
background-color:pink;
}
.wrapper {
display: flex;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div class="wrapper">
<div id="logo"></div>
<div id="rightsideright"></div>
</div>
<div id="rightsidebottom"></div>
</div>
</div>
Edit: To make this answer a bit more universal, here is how the principle works: if you want div A to grow up to a max size, and div B to fill the remaining space, you have to make sure that:
The container is display: flex
A has width: 100% and has a max-width
B has flex: 1
Take note that if A would have flex: 1 as well, its greedy 100% would be overruled by the more generous flexing rule. Therefore the most minimal working example is:
.container {
display: flex;
}
.up-to-max {
width: 100%;
max-width: 100px;
background: red;
}
.filler {
flex: 1;
background: green;
}
<div class="container">
<div class="up-to-max">A</div>
<div class="filler">B</div>
</div>
(Watch in full page to resize the window)
You have to modify your html a bit and to adapt the css.
On a side note, you shouldn't use that much id, use classes.
Also, use flex-basis to give flex children a width.
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;
flex-direction: column;
}
#right>*,
#right>* > *{
flex: 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
margin-left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
}
#rightsidebottom{
background-color:pink;
}
.wrapper {
display: flex;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div class="wrapper">
<div id="logo"></div>
<div id="rightsideright"></div>
</div>
<div id="rightsidebottom"></div>
</div>
</div>
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;
}
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;
}