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
Related
I have a div with a big list, I only want to see (with a scroll) the number of elements that fits in the screen. So I cannot figure how can I adjust the height of the div to the bottom border of screen.
Do I have to use JS?
Based on screen size apply media query styles.
for example Footer want to be bottom we use this for all the browsers
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0; /* Always make footer in bottom at any screen */
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
If you got a fixed size above. You can fill the rest by using css calc.
.test {
height:300px;
width: 100%
background-color:yellow;
}
.full-height {
height: calc(100vh - 300px);
background-color:red;
}
<div class="test"></div>
<div class="full-height">
</div>
A better solution is to use a wrapper. Like this:
.wrapper {
background-color:red;
height: 100vh;
}
.list {
background-color: white;
width: 100%
}
<div class="wrapper">
<div class="list">
<ul>
<li>This</li>
<li>is</li>
<li>a</li>
<li>list</li>
<ul>
</div>
</div>
I have an issue in my project:
<div id="div1"></div>
<div id="div2"></div>
I do in css for desctop #media (min-width:768px) options display block and float left. For first with 70% for second 30%.
In mobile I need 100% width both of them and need to display div2 on top div1. Float right for first and float left for second not working. Need your help guys.
How about this? Flex box allows you to specify the direction of it and also if you are really picky you can specify order number on the item itself.
#container {
display: flex;
}
#div2 {
width:30%;
height:300px;
background:red;
}
#div1 {
width:70%;
height:300px;
background:green;
}
#media only screen and (max-width: 768px) {
#div1, #div2{
width: 100%;
}
#container {
flex-flow: column-reverse;
}
}
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
If you want div2 on top, your html have to move div2 on top of div1
#div2 {
width:30%;
height:300px;
background:red;
float:right
}
#div1 {
width:70%;
height:300px;
background:yellow;
float:left
}
#media only screen and (max-width: 768px) {
#div1, #div2 {
width:100%;
}
}
<div id="div2">div2</div>
<div id="div1">div1</div>
I want make two columns with text inside. Depending on where it will be more text box will increase the width, but height must be the same.
This is my code, and i don't know how to solved the problem.
https://jsfiddle.net/x0qqtr2y/
<div id="main>
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
#main {
width:100%;
background:gray;
display:table;
position:relative;
}
.cell1 {
width:auto;
height:auto;
display:table-cell;
background:red;
float:left;
}
.cell2 {
width:auto;
height:auto;
display:table-cell;
float:left;
background:blue;
}
use display:flex; on the parent element example below
CSS
#main {
width:100%;
display:flex;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
HTML on your main make sure you close the quote marks
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
To learn more about flex use the link:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would try this CSS, worked when I tried it in your Fiddle:
#main {
width:100%;
background:gray;
position:relative;
}
#main div {
display: inline;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
Hi Because u miss (") id="main" below code working fine check it
CSS
#main {
width:100%;
background:gray;
}
.cell1 {
background:blue;
float:left;
}
.cell2 {
float:left;
background:red;
}
Html
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSome</div>
<div class="cell2">SomeTEXTSomeTEXT1</div>
</div>
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 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/