I'm searching for a full-screen (height: 100%, width: 100%, so no scroll bars) fluid layout with a header and 2 colomns, the left one for the navigation menu and the right one for the content. Can anyone help me? Thanks.
FIDDLE
HTML
<div class='table'>
<div class='header'>Header</div>
<div class='row'>
<div class='cell'>Menu</div>
<div class='cell'>Content</div>
</div>
</div>
CSS
* {
box-sizing:border-box;
}
html, body {
width:100%;
height:100%;
overflow:hidden;
position:fixed;
margin:0;
padding:0;
}
.table {
display:table;
width:100%;
height:100%;
table-layout:fixed;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
border:1px solid grey;
}
.header {
display:table-header-group;
border:1px solid grey;
}
Related
Basically I have a layout where I have 3 elements inside a parent with display:flex.
<div class="flex">
<div class="titleContainer">Title</div>
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
<div class="buttonContainer"><button>Button</button></div>
</div>
I should not have scroll in any direction. The idea is that the middle div:
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
takes the remaining space between .titleContainer and .buttonContainer, that's why it has the flex-grow:1 property.
The problem is that if I put an <img/> there is a problem of vertical and horizontal scroll,
this does not happen if I put any other element.
How can I make that the image does not cause scrolling problems and adapts to the available space?
I need to know how to fix this problem using an <img/>.
Thank you very much
html,body{
padding:0px;
margin:0px;
height:100%;
}
*{
box-sizing: border-box;
}
img{
margin:0px;
padding:0px;
}
.flex{
display:flex;
border:1px solid red;
flex-direction:column;
height:100vh;
}
.titleContainer{
border:1px solid blue;
}
.buttonContainer{
border:1px solid green;
}
.imageContainer{
flex-grow:1;
}
<div class="flex">
<div class="titleContainer">Title</div>
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
<div class="buttonContainer"><button>Button</button></div>
</div>
You need to add max-width to the image so it adapts to the size of its container. Just add this to your css:
.imageContainer img {
max-width: 100%;
display: block;
height: auto;
}
You can use media Queries to make the image smaller in size.
in the css part add the following
#media all and (max-width: 1024px) and (min-width: 768px){
img{
width:200px; //or something like this. Change the size of the image.
}
}
There are more details on media queries on here - https://css-tricks.com/css-media-queries/
You always have to define the width and height for the photo
sometimes you dont need to define height you just have to set width:100%; it will be responsive
html,body{
padding:0px; margin:0px; height:100%;
}
*{
box-sizing: border-box;
}
img{
margin:0px; padding:0px; width:100% !important;
}
.flex{
display:flex; border:1px solid red; flex-direction:column; height:100vh;
}
.titleContainer{
border:1px solid blue;
}
.buttonContainer{
border:1px solid green;
}
.imageContainer{
flex-grow:1;
}
<div class="flex">
<div class="titleContainer">Title</div>
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
<div class="buttonContainer"><button>Button</button></div>
</div>
I have searched high and low for days and trying to get two divs side by side (50% wide each) and a second div below at 100% wide...also the two top divs need to change with responsive vieing. i.e right div falls under the left div when screen size is at say 960px wide.
I have tried this code, but the right div displays smaller when you start to reduce the browser size.
I'm sure I have this all wrong, but it's a learning stage for me, so sorry for a basic question! Any help would be so great!!!
Sorry...I can post an image to explain, but to help clear it up, I need in one row, two divs side by side (50% wide each) and in row 2, 1 div that takes up 100% width.
OK! I can add an image now of what I need to achieve! Images 1, 2, 3 will be different sizes along with the amount of text below the image. The layout (example) image is not to scale, and on the site will need a clear background (no colour) The background colours are just to show different the divs in the example.
And this is how it should look in responsive...
HTML:
<div class="custom_div">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
CSS:
.custom_div {
overflow:hidden;
}
.custom_div div {
min-height: 100%;
padding: 10px;
text-align: center;
}
#one {
background-color: gray;
float:left;
margin-right:0px;
width:50%;
}
#two {
background-color: white;
overflow:hidden;
margin-right: 20px;
margin: 1px;
width:auto;
min-height: 50%;
}
#three {
background-color: yellow;
margin-right:auto;
margin-left:auto;
width: 100%;
}
#media screen and (max-width: 600px) {
#one {
float: none;
margin-right:0;
width:auto;
}
}
UPDATE:
Demo Fiddle
The only foolproof way to do this to ensure correct sizing on differing levels of content:
HTML
<div class='table'>
<div class='cell'></div>
<div class='cell'></div>
<div class='caption'></div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}
.caption {
display:table-caption;
caption-side:bottom;
}
.cell, .caption {
height:20px;
border:1px solid black;
}
#media screen and (max-width: 960px) {
.table .cell, .caption {
display:block;
}
}
Original Answer
How about the below?
Demo Fiddle
HTML
<div class="left">left</div>
<div class="right">right</div>
<div class="full">content</div>
CSS
div {
border:1px solid black;
box-sizing:border-box;.
-moz-box-sizing:border-box;
}
.left, .right {
width:50%;
}
.left {
float:left;
}
.right {
float:right;
}
#media screen and (max-width: 600px) {
.left, .right {
width:auto;
float:none;
}
}
You can try below code:
Working Demo
html, body{height:100%;}
.custom_div{width:100%;}
.custom_div div {
background:#ccc;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#one, #two {
width:50%;
float:left;
height:100%;
}
.clearfix{clear:both; display:block;}
#media screen and (max-width: 960px) {
#one, #two {
width:auto;
float:none;
}
}
Checkout the Updated Fiddle : http://jsfiddle.net/PEvLt/3/
I've removed unnecessary properties.
The problem was with the padding and margins.
The thing you should add is always use BOX-SIZING Property.
It'll help you when you are using padding with the widths/heights defined in %
More about Box-Sizing.
http://css-tricks.com/box-sizing/
UPDATE : You need to wrap the first column into one single div or need to clear floats after first 2 columns to avoid overlapping of the third column.
HTML :
<div class="first_two">
<div id="one">
<img src="http://lorempixel.com/500/200/" width="100%"/>
</div>
<div id="two">
<img src="http://lorempixel.com/300/200/" width="100%"/>
</div>
<div class="clear"></div>
</div>
<div id="three">three</div>
CSS :
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.first_two {
background:#3498db;
overflow:hidden;
}
#one {
float:left;
width:50%;
height:100%;
}
#two {
width:50%;
float:left;
height:100%;
}
#three {
background-color:#8e44ad;
width: 100%;
}
.clear{
clear:both;
}
#media screen and (max-width: 600px) {
#one,#two {
width:100%;
}
}
you can set the width of body tag using javascript
<script>
document.getElementsByTagName("body")[0].style.width=screen.width+"px";
</script>
I have the following issue with the next code posted in JSFiddle: http://jsfiddle.net/b9XVV/1/
HTML
<div class="content">
<div class="header">THGE HEADER OF THE PAGE</div>
<div class="thebody">
HERE GOES THE CONTENT OF THE PAGE......
</div>
<div class="footer">
<div class="footerContent">
<div class="footer1">Footer section</div>
<div class="footer2"></div>
</div>
</div>
</div>
CSS
.header {
width:100%;
height:50px;
background-color:#FFFF58;
}
.thebody {
width:500px;
height:400px;
margin:0 auto;
background-color:#DDD;
}
.footer {
width:500px;
height:50px;
background-color:#696969;
margin:0 auto;
}
.footerContent {
width:500px;
height:50px;
}
.footer1 {
width:400px;
height:50px;
float:left;
}
.footer2 {
width:100px;
height:50px;
float:left;
background-color:#FFddFF;
position:fixed;
right:0;
}
The question is that the pink Div should always stay on the footer and fixed on the right, but if window width is less than body width plus pink Div width, the pink Div should be kept on the left of the main footer (500px width)
Another issue is that scrolling the content, the pink div should always stay at the same level of the footer.
CSS:
.footer2 {
width:100px;
height:50px;
background-color:#FFddFF;
}
#media all and (max-width: 649px){
.footer2 {
position: inline;
float: right
}
}
#media all and (min-width: 650px){
.footer2 {
position:fixed;
right:0;
bottom: 0;
}
}
Demo: http://jsfiddle.net/b9XVV/2/
Watch the compatibility of the media queries: http://caniuse.com/#feat=css-mediaqueries Your main problem (if applicable) is IE8.
HTML:
<div id="wrap">
<div id="header">
<div class="logo"></div>
<div class="category"></div>
</div>
</div>
CSS:
#wrap {
width:960px;
margin:0 auto;
position:relative; }
#header_wrap {
position:fixed;
top:0;
left:0;
width:100%;
min-width:960px;
height:105px;
background:rgba(256, 256, 256, 0.6); z-index:999; }
#header {
width:860px;
position:relative;
height:90px;
padding:15px 40px 0 40px;
margin:0 auto; }
.logo {
float:left;
margin-top:-35px; }
.category { float:right; margin-top:-9px; }
I made a fixed header menu on top of page.
But if browser window's width is smaller than wrap width (especially, when zooming on safari in iphone/ipad.), I can't see the right side(category) of header(fixed).
Help!
Do not specify the width in 'px' give it in the form of %, as you maximize or minimize your browser then either the scrollbar will appear and cut off your div
I have one content div with 960px of width and margin 0 auto (centralized), i want put one div occupying all the space of the left margin, how can i do that?
demo jsBin
#container{
position:relative;
width:300px;/*change this*/
margin:0 auto;
height:200px;
background:#cf5;
padding-left:50%;
margin-left:-150px; /*half the width*/
}
#centered{
width:300px;
height:100%;
position:absolute;
right:0px;
background:#eea;
}
HTML:
<div id="container">
<div id="centered">centered</div>
</div>
HERE: http://jsbin.com/oluwos/3/edit is another way to do it.
Use display: table, like this:
http://jsfiddle.net/yVFzh/
<div class="wrapper">
<div class="left-column"> </div>
<div class="centre"></div>
<div class="right-column"> </div>
</div>
html,
body{
width:100%;
}
.wrapper{
display:table;
width:100%;
}
.wrapper > div{
display: table-cell;
background: blue;
height:400px;
}
.wrapper .centre{
width: 960px;
background: yellow;
}