I am having a weird situation with the code below, my body width is set to 980px and my header and content width is set to 100% so they should stretch throughout screen but in firefox they fall short by few pixels and in chrome they just reach the half way, the weird thing is body of page is covering whole screen I checked it by setting background:black for body and whole page turned black then how header and content can fall short with width:100% .But this code works fine on cssdesk cssdesk so what is wrong with my browsers. My screen resolution is 1366x768.
body {
width: 980px;
margin: 0;
background-color: #000;
}
.header {
color: #fff;
margin: 0;
width: 100%;
height: 60px;
background-color: #F23F21;
}
#container {
width: 100%;
}
.one {
height: 200px;
float: left;
border: 1px solid red;
width: 25%;
box-sizing: border-box;
}
.two {
height: 200px;
display: inline-block;
border: 1px solid blue;
box-sizing: border-box;
width: 50%;
}
.three {
height: 200px;
float: right;
border: 1px solid green;
box-sizing: border-box;
width: 25%;
}
<body>
<div class="header">This is header</div>
<div id="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
</body>
The body is not stretching to fill the screen. There are just special rules for how the background colour is handled on the body element (it is used to colour the viewport itself).
The body is the width you gave it. That width is narrower than your browser window.
Everything else is constrained within it.
Dont fix width of your body, inside body create a container div
i have modified your code check this
<style>
body{}
.container{
width:980px;
margin: 0;
background-color: #000;
}
.header{
color:#fff;
margin: 0;
width:100%;
height: 60px;
background-color:#F23F21;
}
#container{
width:100%;
}
.one{
height:200px;
float:left;
border:1px solid red;
width:25%;
box-sizing: border-box;
}
.two{
height:200px;
display:inline-block;
border:1px solid blue;
box-sizing: border-box;
width:50%;
}
.three{
height:200px;
float:right;
border:1px solid green;
box-sizing: border-box;
width:25%;
}
</style>
<body>
<div class="container">
<div class="header">This is header</div>
<div id="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
</div>
</body>
Related
I've got a wrapper with a max-width of 1400px. In this div are two img elements width different sizes. I'd like to float them in a row using flexbox. They should fit in in the 1400px width and still look good, so they have to be scaled like in the picture (red border is the div with 1400px max-width). How can I solve this? I hope it's clear enough.
.wrapper {
display: flex;
max-width: 1400px;
margin: 0 auto;
border: 1px solid black;
}
img {
width: 100%;
display: block;
}
<div class="wrapper">
<img src="https://dummyimage.com/hd1080">
<img src="https://dummyimage.com/vga">
</div>
You can wrap image inside div and adjust the flex property to make one bigger than the other like this :
.wrapper {
display: flex;
max-width: 1400px;
width:100%;
margin: 0 auto;
border: 1px solid red;
}
.first {
height:300px;
flex:2;
position:relative;
border:1px solid #000;
}
.second {
height:300px;
flex:1;
position:relative;
border:1px solid #000;
}
img {
position:relative;
height:100%;
width:100%;
}
<div class="wrapper">
<div class="first">
<img src="https://dummyimage.com/hd1080">
</div>
<div class="second">
<img src="https://dummyimage.com/vga">
</div>
</div>
I'm trying to make a layout that seems simple. Despite looking at lots of examples, I can't crack it.
SideBar| .......MapContainer......
SideBar| ..........Map............
SideBar| .......MapContainer......
Both SideBar and MapContainer should be 100% height.
The tricky bit: Map must have a defined height and width, because the mapbox-gl-js library uses its dimensions to populate it. (Rather than adding content which then sizes it).
MapContainer exists because there will be other absolutely positioned overlay elements within it.
I'm trying to avoid having the sidebar width coded into the definition of MapContainer so I can hide/show the sidebar in JS, and have the MapContainer automatically fill the space.
This gets really, really close:
* {
box-sizing: border-box;
}
.sidebar, .mapcontainer, .container {
height: 200px;
}
.container {
width:100%;
border:1px solid;
display: flex
}
.sidebar {
width:200px;
background:lightblue;
}
.mapcontainer {
width:auto;
background:lightgreen;
position:relative;
flex-grow: 1;
}
.map {
width: 100%;
height: 100%;
position:absolute;
border: 20px dashed grey;
}
<div class="container">
<div class="sidebar"></div>
<div class="mapcontainer">
<div class="map">
</div>
</div>
</div>
But as soon as I change the "height: 200px" to "height: 100%", it collapses to nothing. What do I need to do?
Use viewport units vh instead in the .sidebar, .mapcontainer, .container rule
* {
box-sizing: border-box;
}
html, body {
margin: 0;
}
.sidebar, .mapcontainer, .container {
height: 100vh;
}
.container {
border: 1px solid;
display: flex
}
.sidebar {
width: 200px;
background:lightblue;
}
.mapcontainer {
background:lightgreen;
position:relative;
flex-grow: 1;
}
.map {
width: 100%;
height: 100%;
position:absolute;
border: 20px dashed grey;
}
<div class="container">
<div class="sidebar"></div>
<div class="mapcontainer">
<div class="map">
</div>
</div>
</div>
I just need to add height: 100%; to html and body:
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.sidebar, .mapcontainer, .container {
height: 100%;
}
.container {
width:100%;
border:1px solid;
display: flex
}
.sidebar {
width:200px;
background:lightblue;
}
.mapcontainer {
width:auto;
background:lightgreen;
position:relative;
flex-grow: 1;
}
.map {
width: 100%;
height: 100%;
position:absolute;
border: 20px dashed grey;
}
<div class="container">
<div class="sidebar"></div>
<div class="mapcontainer">
<div class="map">
</div>
</div>
</div>
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>
First of all I'd like to say that I am new to all this. So, here is my situation.
I have set a background image for my entire body.
I have a div .wrapper that I include in all my pages. It's main purpose is to keep my content centered and organized. It's background color is set to grey.
Inside the div .wrapper there is another div .example.
I want this particular div .example to take the background-image of the body and not the color of the .wrapper, but still keep the rest of the .wrapper's properties. Is it possible? I tried no to set the background-image of the .example the same as the body's because I think it shows like a "foreign" object...
<html>
...
<body>
<div class="wrapper">
<div class="example">
<img src="example.png">
</div>
</div> <!-- Wrapper -->
</body>
</html>
body {
background: #ffffff url("bg.jpg") repeat;
background-size: 4%;
background-position: center;
}
.wrapper {
width: 80vw;
margin: auto;
padding: 0px 0px;
background: #e9eaed;
display: block;
}
.example {
width: 100%;
/* background-color: #f6c5b6;*/
}
.example img {
width:40%;
margin: 40px auto;
display: block;
}
The Only way to achieve this is to build your div around it.
.body {
background-image: url('http://placekitten.com/g/40/40');
width: 500px; height:700px; background-repeat:repeat;
}
.wrapper {
width:300px; height:50px; background:grey; margin:0 auto;
}
.mask {
width: 300px; height:100px; margin:0 auto;
}
.left {
width: 50px; height:100px; float:left; background:red;
}
.right {
width: 50px; height:100px; float:right; background:red;
}
<div class='body'>
<div class="wrapper">
box 1
</div>
<div class="mask">
<div class="left">
box 2
</div>
<div class="right">
box 3
</div>
</div>
<div class="wrapper">
box 4
</div>
</div>
i tried some codes but, no works anything.
would like make this with css, thanks =)
this code i tried, but doesn't work.
#left{
float:left;
width:65%;
overflow:hidden;
}
#right{
overflow:hidden;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
i don{t know why this doesnt work.
A simple solution with no floats:
#main {
width: 200px; /* adjust as needed */
font-size: 0;
}
div div {
display: inline-block;
height: 60px; /* adjust as needed */
width: 100%;
box-shadow: inset 0 0 4px #000; /* cosmetics only */
background: #eee; /* cosmetics only */
}
div.h {
width: 50%;
}
<div id="main">
<div class="h"></div>
<div class="h"></div>
<div></div>
</div>
Note: using font-size: 0 for the container div to avoid the actual whitespace in the markup - can be avoided by removing spaces between elements, of course: <div>content here...</div><div>other one...</div>
Add float:left; to #right, then it should work. Note that you could also use float:right; to #right, then #right would be on the right side. Using float: left; for both displays both divs next to each other without any gap.
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Try this script, I wrote it on JSfiddle:
http://jsfiddle.net/xb5vvpzn/1/
HTML
<div class="main">
<div class="top"> </div>
<div class="bottom1"> </div>
<div class="bottom2"> </div>
</div>
CSS
html, body {
padding:0;
margin:0;
}
.main {
width:400px;
border:1px solid #000;
height:400px;
padding:10px;
}
.main div {
display:inline-block;
}
.top {
width:396px;
border: 1px solid #cc0000;
height:100px;
}
.bottom1, .bottom2 {
margin-top:10px;
border: 1px solid #cc0000;
width:195px;
height:100px;
}
Here's a jsFiddle that I've quickly created for you. The layout is same as what you had requested and it's responsive as well.
HTML:
<div id="container">
<div id="onetwo">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>
</div>
CSS:
#container {
width: 100%;
border: 3px solid blue;
padding: 1% 1%;
text-align: center;
}
#onetwo {
display: block;
width: 100%;
}
#one, #two {
width: 49%;
border: 3px solid red;
height: 50px;
display: inline-block;
}
#three {
width: 100%;
border: 3px solid red;
height: 50px;
}
#media (max-width: 820px) {
#one, #two {
width: 46%;
}
}
#media (max-width: 240px) {
#one, #two {
width: 40%;
}
}