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
Related
I'm trying to rearrange 3 divs when device width is below 900px. They are arranged as three columns (2 floating divs and main one in the middle) and i don't know how to make them be 2 columns and third div below them (Image shows what i'm aiming at).
Thank you in advance :)
Adding code as you asked :) here is html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header></header>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
</body>
</html>
and here is css
#container{
width: 90%;
margin: 0px auto 0px auto ;
}
header{
width: 100%;
height: 200px;
background-color: blue;
}
#left{
float: left;
width: 20%;
height: 500px;
background-color: orange;
}
#right{
float: right;
width: 20%;
height: 500px;
background-color: green;
}
#middle{
width: 80%;
background-color: red;
height: 500px;
}
if i make right div float:none then it moves the middle div
You need to use media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Enjoy
With media queries and flex.
Here is a snippet, (click on run then full screen).
<div class="flex">
<div class="sub c">1</div>
<div class="sub c">2</div>
<div class="doge c">3</div>
</div>
.flex{
display: flex;
flex-wrap: wrap;
}
.c{
height:20px;
width:20px;
border: 1px solid green;
box-sizing: border-box;
}
#media(max-width:600px){
.sub{
width: 50%;
}
.doge{
width: 100%
}
}
<div class="flex">
<div class="sub c"></div>
<div class="sub c"></div>
<div class="doge c"></div>
</div>
Welcome to the world of {in an ominous voice} RESPONSIVE DESIGN ! ,
To perform what you are trying to do you will need to explore Media Queries.
Here is an example of what you are trying to do: JSFiddle
HTML
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
<div class="bottom">
Bottom content flexible width
</div>
</div>
CSS
.container {
height: 100px;
overflow: hidden;
}
.left {
float: left;
background: #00FF00;
width: 25%;
overflow: hidden;
height: 100%;
}
.right {
display: inline-block;
width: 50%;
background: #0000ff;
height: 100%;
}
.bottom {
float: right;
background: #ff0000;
display: inline-block;
width: 25%;
height: 100%;
}
#media only screen and (max-width: 900px) {
.container {
height: auto;
overflow: hidden;
}
.left {
float: left;
background: #00ff00;
width: 25%;
overflow: hidden;
height: 100px;
}
.right {
float: none;
width: 75%;
background: #0000ff;
height: 100px;
}
.bottom {
position: relative;
float: none;
background: #ff0000;
width: auto;
overflow: hidden;
height: 50px;
display: inherit;
}
}
Good luck!
It would be helpful to see your sourcecode to tell you why it has not worked. At least you could describe it in more detail. Otherwise I would suspect that clear: both could maybe help you here by redefining a div-class in a media-query. At least this has worked for me.
As an example you could just attach float: left for the left column then the middle column would be following on the right side. By redefining the right-column (class) with clear: both the right-column would then be a footer. This is just an example and would not be the best solution indeed.
Here's my take on it.
/* Styles go here */
body,html{
margin: 0;
padding: 0;
height:100%;
}
.wrapper{
height:100%;
width:100%;
padding: 20px;
}
.div1{
height:100%;
width:30%;
float:left;
background-color:orange;
}
.div2{
height:100%;
width:30%;
float:left;
margin-left:2%;
background-color:red;
}
.div3{
height:100%;
width:30%;
margin-left:2%;
float:left;
background-color:green;
}
#media(max-width:900px){
.wrapper{
height:100%;
width:100%;
clear:both;
}
.div1{
height:70%;
width:49%;
float:left;
background-color:orange;
}
.div2{
height:70%;
width:49%;
float:left;
background-color:red;
}
.div3{
height:30%;
width:100%;
float:left;
margin:20px 0 20px 0;
background-color:green;
}
}
<div class="wrapper">
<div class="div1"><p></p></div>
<div class="div2"><p></p></div>
<div class="div3"><p></p></div>
</div>
Elements inside .wrapper are not centered aligned and after assigning width to .wrapper, it's showing a horizontal scrollbar.
#footer {
width:100%;
}
#footer .wrapper{
background:red;
margin:0 auto;
position:relative;
width: 1024px;
height: 192px;
font-size:a
}
#footer .wrapper .col {
width: 20%;
height: 192px;
background: green;
display: inline-block;
}
<footer id="footer">
<div class="wrapper">
<div class="col right-list">
</div>
<div class="col middle-list">
</div>
<div class="col left-list">
</div>
</div>
</footer>
Any suggestions as to why this is happening?
#footer .wrapper{
background:red;
margin:0 auto;
position:relative;
max-width: 1024px;
width: 100%;
height: 192px;
font-size:a
}
you may not set a determined width
Were you looking for something like this:
https://jsfiddle.net/3ux7bdpf/
#footer {
width:100%;
}
#footer .wrapper{
background:red;
margin:0 auto;
position:relative;
height: 192px;
font-size:a
}
#footer .wrapper .col {
width: 20%;
margin-right:10%;
height: 192px;
background: green;
display: inline-block;
}
#footer .wrapper .col:first-child {
margin-left:10%;
}
#footer .wrapper .col:last-child {
margin-right:0;
}
Its is simple. Why you are assigning fixed width to .wrapper
Just put width: 100%; or any width you want respective of footer in %.
Instead Assign Max-width to it. So if browser size is more than max-width than it will adjust accoring to your max-width.
#footer {
width:100%;
}
#footer .wrapper{
max-width: 1024px;
background:red;
margin:0 auto;
position:relative;
width: 100%;
height: 192px;
text-align: center;
}
#footer .wrapper .col {
width: 20%;
height: 192px;
background: green;
display: inline-block;
}
<footer id="footer">
<div class="wrapper">
<div class="col right-list">
</div>
<div class="col middle-list">
</div>
<div class="col left-list">
</div>
</div>
</footer>
I want to achieve the following: A design with two columns of the same width, covering the whole width of the document, or a fixed width of pixels, whichever is smaller. When they are resized to a certain width, they should be moved underneath each other and take up at most 100% of the width of the screen (exactly 100% would be nice, but is not necessary).
I came up with the following code, but the max-width of 100% does not get applied.
Can i combine a width in percent and a max-width in percent like this?
Is this possible without another layer of divs?
Is this possible at all?
#head {
background-color: #00FF00;
}
body {
text-align: center;
}
#container {
margin: 0 auto;
width: 100%;
max-width: 500px;
text-align: center;
}
#left {
background-color: #FF0000;
float: left;
width: 50%;
min-width: 150px;
max-width: 100%;
}
#right {
background-color: #0000FF;
float: left;
width: 50%;
min-width: 150px;
max-width: 100%;
}
<div id="head">
foo
</div>
<div id="container">
<div id="left">
bar
</div>
<div id="right">
baz
</div>
</div>
I think you need media queries. You can set the width for different viewports.
#head {
background-color:#00FF00;
}
body {
text-align:center;
}
#container{
margin: 0 auto;
width:100%;
max-width:500px;
text-align:center;
}
#left {
background-color:#FF0000;
float: left;
width: 50%;
min-width: 150px;
max-width: 100%;
}
#right {
background-color:#0000FF;
float: left;
width: 50%;
min-width: 150px;
max-width: 100%;
}
#media (max-width: 500px) {
#left { width: 100%;}
#right { width: 100%;}
}
<html>
<head>
</head>
<body>
<div id="head">
foo
</div>
<div id="container">
<div id="left">
bar
</div>
<div id="right">
baz
</div>
</div>
</body>
</html>
you may use flex and min-width: http://codepen.io/anon/pen/JXNMgd
/* added */
#container {
display: flex;
flex-wrap: wrap;
}
#left,
#right {
flex: 1;
}
/* your css cleared a bit */
#head {
background-color: #00FF00;
}
body {
text-align: center;
}
#container {
margin: 0 auto;
max-width: 500px;
text-align: center;
}
#left,
#right {
background-color: #FF0000;
min-width: 150px;
}
#right {
background-color: #0000FF;
}
<div id="head">
foo
</div>
<div id="container">
<div id="left">
bar
</div>
<div id="right">
baz
</div>
</div>
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;
}
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