Does someone know how i can make something like this by only using css?
on each side their is 1/5 space.
i have already the html part done.
example
This is the html with css
<div class="container">
<div class="block-1">
</div>
<div class="block-2">
</div>
</div>
html, body {
height: 100%;
margin: 0;
}
.container {
width: 60%; /* left and right 20% */
min-height: 100%;
margin: 0 auto; /* center */
background-color: blue;
}
.block-1 {
width: 100%;
height: 100px;
background-color: grey;
}
.block-2 {
width: 100%;
}
Related
I have 3 divs, main, right and left. The main div contains the right and left div and I want to align the right and left div side by side. I have read few posts here but have not been able to get the desired results.
https://jsbin.com/lagikaxiwe/edit?html,css,output
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
}
div#right-content {
position: relative;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
position: absolute;
width: calc(100% - 35%);
height: 100%;
margin: 0px 0px 0px 666px;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
The simplest method nowadays to use display: flex on the container. Have a look at the settings in my snippet - I erased a lot of the other settings, which are not necessary...
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
div#main-content {
background-color: bisque;
height: 100%;
display: flex;
}
div#right-content {
width: 35%;
height: 100%;
background-color: red;
}
div#left-content {
width: 65%;
height: 100%;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
width: 100%;
}
div#right-content {
float: left;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
width: calc(100% - 35%);
height: 100%;
background-color: #00aeef;
float: left;
}
I would personally use display:inline-block to align the left and right divs
side by side and add the necessary widths to add up to 100% of the parent width. Be sure to use font-size:0 on the parent to eliminate the white space between the left and right divs so they sit next to each other correctly.
Be sure to assign font-sizes to your left and right content so your content actually shows up!
This method is largely backwards compatible with all browsers.
div#main-content{
font-size:0;
}
div#left-content{
display:inline-block;
vertical-align:top;
width:65%;
}
div#right-content{
display:inline-block;
vertical-align:top;
width:35%;
}
This question already has answers here:
Setting div width to 100% minus certain amount of px
(5 answers)
Expand a div to fill the remaining width
(21 answers)
Closed 6 years ago.
I will simulate what i need to achieve.
for example, i want that #2 took the whole space, remaining of 100% - 180px.. how to achieve that?
p.s. seems flexbox is more supported over devices than calc - http://css3clickchart.com/#flexbox
You can use flexbox model as shown below. Adding flex: auto; will allow the right content to use remaining width.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#parent {
display: flex;
height: 100%;
}
#left {
width: 180px;
background-color: hotpink;
}
#right {
flex: auto;
background-color: dodgerblue;
}
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
Use css calc
Here with a example.. This might help:
.class {
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
}
You can use float: left and overflow: hidden.
aside {
float: left;
width: 30%;
background: beige;
}
article {
overflow: hidden;
background: brown;
color: white;
}
<aside>
sidebar
</aside>
<article>
content
</article>
There are many ways to do this. One simple way is below.
1st way: Simple inline-block
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
float: left;
}
.main-content {
display: inline-block;
background-color: green;
}
<div class="container">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
Fair warning though: In this case the .main-content will only take the space it needs, and will not actually be full width. So If you want to set background to it, you should actually set the backround to .container.
2nd way: Use calc for width
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
position: relative;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
float: left;
}
.main-content {
float: right;
background-color: green;
width: calc(100% - 180px);
height: 600px;
}
<div class="container">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
3rd way: use Flex
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
display: flex;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
}
.main-content {
background-color: green;
flex: auto;
}
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
Flexbox is probably the nicest solution, but saidly old browsers don't support it.
4th way of doing this is the oldfasioned way with faking tables:
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
display: table;
}
.sidebar {
background-color: red;
width: 180px;
display: table-cell;
}
.main-content {
display: table-cell;
background-color: green;
}
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
Have problem. I have this code.
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I need to make two colums.
"Sidebar" must have fixed width 200px;
And "content" all remaining width to fullscreen.
I cant change the structure of html code, just css.
if absolute position is ok, you can use it to say left:200px; right:0 and get all the space you need
fiddle : http://jsfiddle.net/h2udmqhn/
.main {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: red;
}
.content {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 200px;
background: blue;
}
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
Use float: left for .sidebar and left margin for .content:
.sidebar {float: left; width: 200px; background: red;}
.content {background: green; margin: 0 0 0 200px;}
http://jsfiddle.net/orty5qtj/1/
Another option is to use calc, which is unsupported in IE8. The solution above works fine in all browsers.
Try this :
.sidebar {
float: left;
min-height: 50px;
background: red;
width: 200px;
}
.content {
background : yellow;
margin-left: 200px;
min-height: 50px;
}
https://jsfiddle.net/Saiyam/5krmkkkx/3/
There a couple of simple ways to do this without the need for calc, margins or absolute positioning. Both of the following ways have the added bonus of keeping the columns the same height as each other
Using display table (compatible to back ie8)
.main {
display: table;
width: 100%;
}
.main > div {
display: table-cell;
}
.sidebar {
width: 200px;
background: blue;
}
.content {
background: red;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
Using flex (for newer browsers only unless used with the browser prefix):
.main {
display: flex;
width:100%;
max-width:100%;
}
.sidebar {
width: 200px;
flex: 0 0 200px;
background-color:blue;
}
.content {
background-color:red;
flex: 1 0 auto;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
Could like to make a screen layout that's broadly like this:
The entire browser window should be filled with the only two elements of "known" height being the white blocks top, left and bottom, left (for two labels, hence known will be relative to a font). Everything else should scale with the browser window, i.e. the left bar being 15% wide, the right 85%, etc.
As a C++ developer my instinct here was to handle events in Javascript and code against the DOM but I've got a feeling this is relatively trivial with CSS.
Can anyone help me please?
I tried to reproduce quickly :
* {
box-sizing: border-box;
}
html,
body,
.wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.left,
.right {
float: left;
}
.left {
position: relative;
width: 15%;
height: 100%;
}
.left .label-top,
.left .label-bottom {
position: absolute;
width: 100%;
background-color: #fff;
}
.left .label-top {
top: 0;
left: 0;
}
.left .label-bottom {
bottom: 0;
left: 0;
}
.left .content,
.left .top,
.left .bottom {
border: 1px solid white;
}
.left .top,
.left .bottom {
height: 5%;
background-color: gray;
}
.left .content {
height: 30%;
background-color: #a09898;
}
.right {
width: 85%;
height: 100%;
background-color: gray;
}
.right::after {
content: '';
display: table;
clear: both;
}
<div class="wrapper">
<div class="left">
<div class="label-top">Label</div>
<div class="top"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="bottom"></div>
<div class="label-bottom">Label</div>
</div>
<div class="right"></div>
</div>
So, a little base that you can start to work on top of.
As fixed height, i used vh and it really depends in what browsers you want to support: vh support
Else you can use height: 100% of the parent or body.
.left-bar {
width: 15%;
background-color: red;
float: left;
height: 100vh;
border-right: 5px solid black;
}
.right-window {
width: 85%;
float: left;
height: 100vh;
background-color: pink;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="left-bar">
</div>
<div class="right-window">
</div>
I think this is what you want. Not sure though.
This achieves the full browser filling.
If you notice the width has calc() removing the 5px from the border, if you desire you can remove that and place only 15%.
I think you only wanted a base structure and this is a really simple one, and you gotta love my color picking skills.
Edit: Replaced calc() by adding box-sizing: border-box thanks to #Paulie_D comment.
For layouts, consider using positioning and display properties. There are many ways to create a dynamic structure, that ensures responsiveness.
For more detail, please see this question and answer for some 'general' rules you may consider when creating a website.
.left {
position: absolute;
lefT: 0;
top: 0;
height: 100%;
width: 15%;
background: lightgray;
}
.right {
position: absolute;
left: 15%;
top: 0;
height: 100%;
width: 85%;
background: dimgray;
}
.left .fixedBlock {
margin: 0;
padding: 0;
height: 50px;
background: blue;
}
.left .filledDiv {
height: calc(100% - 100px);
background: tomato;
}
.left .filledDiv .third {
height: 33.33%;
background: rgba(0, 0, 0, 0.2);
}
.left .filledDiv .third:nth-child(2) {
background: rgba(0, 0, 0, 0.4);
}
<div class="left">
<div class="fixedBlock">fixed height</div>
<div class="filledDiv">
<div class="third">dynamic height</div>
<div class="third">with children</div>
<div class="third">a third of its heigth</div>
</div>
<div class="fixedBlock">also fixed height</div>
</div>
<div class="right">right side - open me in full screen!</div>
here is the sample html:
<div id = "mainWrapperDiv">
<div id = "mainDiv">
<div> testing </div>
</div>
</div>
<div id = "footerDiv">
</div>
its css:
*
{
padding: 0px;
margin: 0px;
}
body, html
{
height: 100%
}
div
{
border: none;
}
#mainWrapperDiv
{
min-height: 100%;
height: 100%;
margin-bottom: -200px;
}
#mainDiv
{
margin: 0px auto 0px auto;
width: 1000px;
min-height: 500px;
background: lightgreen;
}
#footerDiv
{
height: 200px;
width: 100%;
position: relative;
clear: both;
background: lightblue;
}
What sticky footer are you using? What does your code look like? You could try
http://www.cssstickyfooter.com/
Because the position is set to relative. and also the margin-bottom: -200px;
It's because of your margin-bottom in the #mainWrapperDiv. If you take that out it appears to work okay. Check it out http://jsfiddle.net/kA6XJ/