Ok, I'm setting up a mini-page and I want it to be 100% scalable so I'm trying to use only %.
But I don't get the "items" to take the 33% width and distribute is over the 80% of "content".
What am I doing wrong?
body, html{
width: 100%;
height: 100%;
}
.menu{
width: 20%;
height: 100%;
background: #fff;
float: left;
}
.content{
width: 80%;
height: 100%;
background: #eee;
float: left;
}
.bottom{
position: absolute;
bottom: 0;
}
.item{
width: 33%;
float: left;
}
.red{background: red;}
.blue{background: blue;}
.green{background: green;}
<div class="menu">menu</div>
<div class="content">content
<div class="bottom">
<div class="item red">left</div>
<div class="item blue">mid</div>
<div class="item green">right</div>
</div>
</div>
Try like this: Demo
.content{
position: relative;
}
.bottom{
width:100%;
}
.item{
box-sizing:border-box;
}
Related
I have a section inside width: 1180px; i want to extend this green color div I want to make width: 100% I have tried using vw but not getting but some extra space is coming. can anyone suggest me? Is there any other way to do using CSS.
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
width: 100vw;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You need to reset the margin using media query. Initially you have a negative margin but after 1180px it will be a positive one creating the unwanted space. You also don't need to set width using vw unit. Keeping the default width is enough:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
}
#media all and (max-width:1180px) {
.box2 {
margin:0;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You could use negative margin - the only problem with this approach is that if the page gets a vertical scroll, this will add a horizontal scroll as 100vw doesn't take into account the 20px caused by the vertical scroll:
body {
margin: 0;
}
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
#media screen and (min-width:1180px) {
.box2 {
margin: 0 calc(((100vw - 1180px) / 2) * -1);
width: auto;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
As I say in my comments, it would be better to just move the green div outside your wrapper
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Try this:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
I'm attempting to have a static left div and have the right divs be scrollable. I'd like to be flexible so I set widths and heights to percentage basis.
Currently, when I scroll the left div scrolls with the right div, so when I reach the second right div in the stack, there is not left div associated to it.
I'd like for the left div to always remain and only the right divs to scroll.
HTML:
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
CSS:
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: static;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
You just have to set position: fixed for left div. Check code below.
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: fixed;
}
#clear {
clear: both;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div id="clear"></div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
you need the first in fixed position and the rest be margin-left at 50% ... if i understood:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.div-left {
background-color: darkblue;
height: 100%;
width: 50%;
margin: 0px;
position: fixed;
}
[class^="div-right"] {
background-color: yellow;
height: 100%;
margin-left: 50%;
}
.div-right-2 {
background-color: aqua;
}
<div class="div-left div-left-small">
</div>
<div class="div-right-1 div-right-1-small">
</div>
<div class="div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
I'm creating a website that has the following setup:
<html>
<body>
<div class="wrapper">
<div class="wrapper_devider">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</div>
</body>
</head>
The css is as following:
.wrapper{
margin: 0 auto;
max-width: 1500px;
}
.wrapper_devider{
width:60%;
padding:0 20%;
}
#header{
float: left;
width: 100%;
}
.slider{
display:block;
float:left;
width:100%;
background-color:#0000FF;
height:150px;
}
#container{
float: left;
width: 100%;
}
.sidebar{
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer{
display:block;
float: left;
width: 100%;
}
The .wrapper has a fixed width of 1500px and the rest is done with %.
The thing I can't seem to fix is that I want the slider to be full width.
I have tried to set the width if the .slider to 1500px but it only expands to the right.
Can anybody see what I do wrong?
M.
The wrapper has a max-width of 1500, this is different then a fixed width, this would look like
width: 1500px;
Even if you set the width to 1500, it still won't work because your slider element is inside your divider.
I would recommend the following layout:
HTML
<body>
<div class="wrapper">
<div class="wrapper_divider">
<div id="header">header</div>
</div>
<div class="slider">slider</div>
<div class="wrapper_divider">
<div class="container">container</div>
<div class="sidebar">sidebar</div>
<div class="footer">footer</div>
</div>
</div>
</body>
CSS
.wrapper{
margin: 0 auto;
width: 1500px;
}
.wrapper_divider{
width:60%;
padding:0 20%;
}
#header{
float: left;
width: 100%;
}
.slider{
display:block;
float:left;
width:100%;
background-color:#0000FF;
height:150px;
}
#container{
float: left;
width: 100%;
}
.sidebar{
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer{
display:block;
float: left;
width: 100%;
}
I've made an example of how it would look: http://jsfiddle.net/zon1d0gz/
OPTIONS
Move Slider outside of .wrapepr.
Make .wrapper 100% width and add new internal div of 60%.
If you cannot move the slider then make it position:absolute and offset the .wrapper with padding.
.wrapper {
position:relative;
margin: 0 auto;
max-width: 1500px;
padding-top:150px;
}
.wrapper_devider {
width: 60%;
padding: 0 20%;
}
#header {
float: left;
width: 100%;
}
.slider {
position:absolute;
left:0;
top:0;
display: block;
float: left;
width: 1500px;
background-color: #0000FF;
height: 150px;
}
#container {
float: left;
width: 100%;
}
.sidebar {
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer {
display: block;
float: left;
width: 100%;
}
<div class="wrapper">
<div class="wrapper_devider">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</div>
Your .wrapper class has max-width:1500px. This is an upper limit, I think you want: width:1500px.
.wrapper{
width: 1500px;
display: inline-block;
height: 100%;
}
Also wrapper_devider is set to 60%, so the slider won't span the entire 1500px since the slider is nested within wrapper_devider. I would remove that div entirely, you don't need it.
<body>
<div class="wrapper">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</body>
Here's the solution with jsfiddle
i need have 3 columns in one row. Column in center is fixed width, but left and right column must be fluid. Also I need open this page with Android and IE8. So it should works and with old browser.
What i need:
My try, but unsuccessful:
.left {
float: left;
width: 100%;
margin-left: -50%;
height: 230px;
background: url('left.png') no-repeat right top;
}
.center {
float: left;
margin-left: -62px;
background: #FDE95E;
width:123px;
height:123px;
background: url('center.png');
}
.right {
float: left;
width: 50%;
height:230px;
background: url('right.png') no-repeat left top;
}
HTML:
<div class="left"><br></div>
<div class="center"><br></div>
<div class="right"><br></div>
<div style="clear: both;"></div>
css
.left {
background: red;
float: left;
height: 500px;
width: calc(50% - 50px);
}
.center {
background: gray;
height: 500px;
width: 100px;
margin: auto;
}
.right {
background: red;
float: right;
height: 500px;
width: calc(50% - 50px);
}
html
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
<div style="clear: both;"></div>
http://jsfiddle.net/usb9sbje/
flexbox (caniuse) fixes this with ease if you don't want to use float.
What you need is a wrapper with display:flex;, set #center to a desired width and then your sides 50% width minus the width of the #center.
html, body {
height:100%;
margin:0;
}
#wrapper {
display:flex; /* Required. */
height:100%;
}
#left, #right {
background:blue;
height:100%;
width:calc(50% - 61px); /* 61 equals width of your #center divided by two. – Required. */
}
#center {
width:122px; /* Required. */
}
<div id='wrapper'>
<div id='left'>left</div>
<div id='center'>center</div>
<div id='right'>right</div>
</div>
Another way, without using calc()
.container {
position: relative;
}
.left, .right {
width: 50%;
box-sizing: border-box;
}
.left {
float: left;
padding-right: 50px;
}
.right {
float: right;
padding-left: 50px;
}
.inner {
background: red;
height: 500px;
}
.center {
background: gray;
height: 500px;
width: 100px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
html
<div class="container">
<div class="left"><div class="inner">Left</div></div>
<div class="right"><div class="inner">Right</div></div>
<div class="center">Center</div>
<div style="clear: both;"></div>
</div>
http://jsfiddle.net/usb9sbje/3/
I have a div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle