I try to build a layout with 2 floating DIV´s on higher resolution and without floating on small resolution. One (subnavigation) with a fixed width and one (content) with a max-width.
here is an example code of the HTML:
<div id="subnavigation">
lorem ipsum...
</div>
<div id="content">
lorem ipsum...
</div>
and here the CSS:
#subnavigation {
float:right;
width:320px;
}
#content {
max-width:730px;
}
#media only screen and ( max-width:800px ) {
#subnavigation, #content {
float:none;
width:auto;
}
}
My problem now is that I need the subnavigation below the content without the float. Have someone an idea?
I tried a little bit with the calc() in CSS to get a fixed width for the content (to be able to float that), but it doesn't really work on my android-phone.
You could possibly use some negative margin sorcery.
Heres one way to approach it (probably a bit overcomplicated)
HTML
<div class="page">
<div class="content-wrapper">
<div class="content">
..content..
</div>
</div>
<div class="sidebar">
..content..
</div>
</div>
CSS
.page {
width:1050px; /*320px + 730px*/
max-width:100%;
margin:0 auto;
background:grey;
}
.content-wrapper {
float:left;
width:100%;
}
.content {
margin-right:320px;
background:orange;
}
.sidebar {
float:left;
width:320px;
margin-left:-320px;
background:green;
}
#media (max-width:480px) {
.content-wrapper {
float:none;
width:auto;
margin-bottom:20px;
}
.content {
margin-right:0;
}
.sidebar {
float:none;
margin:0;
width:auto;
}
}
Fiddle: http://jsfiddle.net/Varinder/vV4LT/
Related
I want to have two columns (content and sidebox), where sidebox will have fixed width and content will shrink as necassary.
At some point, they will both stack to 100% width, but i want to have content first. The problem with this solution is that sidebox comes first.
I don't want to use floats and percentage because i don't want to shrink the sidebox.
html:
<aside class="sidebox"> <!-- i don't want this to come first after media query applied -->
sidebox
</aside>
<section class="content">
content
</section>
css:
.content {
margin-right:200px;
height:100px;
background-color:red;
}
.sidebox{
width:180px;
float:right;
height:100px;
background-color:yellow;
}
#media (max-width: 500px) {
.sidebox {
float:none;
width: auto;
}
.content {
margin-right:0px;
}
}
DEMO: https://jsfiddle.net/72Lad2zf/
You can use the following:
.container {
display:table;
width:100%;
}
.content {
display:table-cell;
height:100px;
background-color:red;
}
.sidebox {
display:table-cell;
width:180px;
height:100px;
background-color:yellow;
}
#media (max-width: 500px) {
.content, .sidebox {
width:100%;
display:block;
}
}
<div class="container">
<section class="content">content</section>
<aside class="sidebox">sidebox</aside>
</div>
Updated Fiddle
You need change the html structure and need to use float in .content but float doesn't shrink the width.
html
<section class="content">
content
</section>
<aside class="sidebox">
sidebox
</aside>
css
.content {
height:100px;
background-color:red;
float:left;
width:calc(100% - 200px);
}
working Demo
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
I have a header that is divided into a few parts.
First, it's divided into left, and right.
The right part is then divided into stacked top and bottom, or at least that's what I'm trying to do.
However, they won't show up (unless there's text or something.)
HTML
<div id="header">
<div id="header_left">
<div id="header_title">
<p id="t1">TEXT</p>
<p id="t2">TEXT</p>
<p id="t3">TEXT</p>
</div>
</div>
<div id="header_right">
<div id="right_top">x</div>
<div id="right_bottom">x</div>
</div>
</div>
CSS
#header_right {
height:100%;
float:right;
}
#right_top {
height:140px;
width:100%;
display:block;
background-color:#FF0000;
}
#right_bottom {
height:60px;
width:100%;
display:block;
background-color:#000;
}
You have to set position:absolute for the empty div's to display
position:absolute;
You should to add this:
#header_right {
height:100%;
float:left; /*changed from right*/
}
/*added new class*/
#header_left{
float: left;
width: 97%;
}
#header,
#main,
#sidebar,
#footer {
background-color: black;
display:inline;
position:relative;
float:left;
}
#header,
#footer {
width:100%;
height:25%;
}
#main {
width:68%;
height:50%;
margin-right:2%;
}
#sidebar {
width:30%;
height:50%;
}
....
<body>
<div id="header"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</body>
hi,this code snippet shrink content when windows minimized. my wanted result is that when minimized it, the browser just have a scrollbar and the content will not move on to their place.thanks
Haven't tested it with your code, but maybe setting min-width on body will do it.
body {
min-width: 1170px;
}
1170px could of course be something else.
Can somebody please help me with this piece of code?
HTML:
<div id="container">
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
</div>
CSS:
#container {
margin:auto;
text-align:center;
padding:10%;
}
.block {
width:240px;
height:300px;
background: red;
display:inline-block;
}
jsfiddle
I want it so that the whole container aligned in the middle but when there is an extra block at the bottom, it should go to the left. Is that possible?
This works:
HTML:
#container {
margin:auto;
text-align:center;
width:70px;
overflow:hidden;}
CSS:
.block {
width:24px;
height:30px;
float:left;
margin:5px 5px;
background: red;}
See the jsfiddle here. I changed the sizes so that it's easier to see but you can readjust them according to your site. Basically, you need overflow:hidden; and set the width of the container so that it can only fit 2 blocks per row so that the next block goes underneath and is aligned to the left. Also, remember that ids must be unique in your page; if you need more than one element with the same definition then you must use classes.
I would use float: left in block id,remove container from css and use class instead of id because id must be used once:
HTML:
<div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
</div>
CSS:
.block {
width:40%;
height:300px;
margin: 5%;
float: left;
background: red;
display:block;
}
Try this plugin for jQuery to help you organize the DIV.
desGridLayout:
http://des.delestesoft.com:8080/?go=8
I solved my own problem with #media queries :
#media screen and (max-width: 840px) {
.portfolio_container {
width:512px;
}
}
#media screen and (max-width: 580px) {
.portfolio_container {
width:255px;
}
}
I know media queries are not compatible with older browser versions! but at least it is supported by all most recent versions!