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>
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>
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 have a layout where I have 3 columns.
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
How can I place these 3 blocks in one line without JS, calc and flexbox if I need:
logo should be fixed
user-name should have auto width
search-input should places on the left free space between logo and user-name blocks. It has to be fluid container.
Use flexbox:
#wrapper {
display: flex;
/* flex-direction: row; <-- by default */
}
#logo {
flex: 0 0 200px;
background-color: lightgreen;
}
#user-name {
flex: none;
background-color: lightblue;
}
#search-input {
flex: 1 0 auto;
background-color: lightgrey;
}
<div id="wrapper">
<div id="logo">logo</div>
<div id="search-input">input</div>
<div id="user-name">user name</div>
</div>
May be this is what you want. you can add content of user-name to see how it work.
.wraper{
width: 100%;
border: 1px solid red;
}
#logo{
float:left;
width:250px;
height: 50px;
border:1px solid #CCC;
display:block;
background-color:yellow;
}
#search-input{
margin-left:260px;
min-height:50px;
display:block;
background-color:red;
}
#user-name{
float:right;
display:block;
height:50px;
background-color:#FFF;
}
#search-input > .inner{
height:50px;
background-color:red;
margin-right:20px;
}
#user-name > .inner{
background-color:green;
min-width:150px;
height:50px;
margin-left:10px;
}
<div id="wrapper">
<div id="logo">Logo</div>
<div id="user-name">
<div class="inner">
user name
</div>
</div>
<div id="search-input">
<div class="inner">
search input
</div>
</div>
</div>
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
<style>
#logo{float:left;padding:2px}
#search-input{width:50%;float:left;padding:2px}
#user-name{width:auto;float:left;padding:2px}
</style>
#wrapper{
display:block;
}
#logo{
display:inline-block;
width:30%;
float:left;
}
#search-input{
width:50%;
display:inline-block;
float:left;
}
#user-name{
width:auto;
display:inline-block;
float:left;
}
This will keep them in one line.
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;
}