I'm trying to create the following layout using only regular CSS display properties (block, inline..) not using flex or grid.
The top thing(bandeau) should have a height of 100px and horizontal margins that are 50px.
Both the left and right columns should have a width of 100px.
The footer thingy(pied) should have a height of 80px and horizontal margins of 75px.
body {
margin: 0;
padding: 0;
background: black;
min-height: 100%;
}
.bandeau {
height: 100px;
background: white;
margin: 0 50px;
}
.menuGauche {
width: 50px;
background: lightblue;
height: calc(100% - 80px);
margin: 0 0 80px 0;
position: absolute;
}
.ecran {
background: lightgreen;
width: calc(100% - 100px);
height: calc(100% - 80px);
position: absolute;
margin: 0 50px;
}
.menuDroite {
width: 50px;
background: lightblue;
height: calc(100% - 80px);
margin: 0 0 80px 0;
position: absolute;
left: calc(100% - 50px);
}
.pied {
height: 80px;
background: white;
margin: 0 75px;
width: 100%;
position: absolute;
bottom: 0;
}
<div class="bandeau"></div>
<div class="menuGauche"></div>
<div class="ecran"></div>
<div class="menuDroite"></div>
<div class="pied"></div>
When I am doing this kind of layout, I try to group them horizontally, so the two columns will be wrapped in another div. similar to this:
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-color: black;
}
.top {
margin: 0 50px;
height: 100px;
background-color: white;
}
.mid {
height: 500px;
background-color: green;
}
.left-col,
.right-col {
height: 100%;
width: 100px;
background-color: blue;
}
.left-col {
float: left;
}
.right-col {
float: right;
}
.bottom {
margin: 0 75px;
height: 80px;
background-color: white;
}
</style>
</head>
<body>
<div class="main">
<div class="top"></div>
<div class="mid">
<div class="left-col"> </div>
<div class="right-col"> </div>
</div>
<div class="bottom"> </div>
</div>
</body>
</html>
I've used float and assume a height for the middle section as it was not specified. Here is a plunk. Hope this helps!
As a beginner, you should avoid using absolute positionning and learn display , then float.
Nowdays display flex makes it easier.
You may also use tags which can be meaningfull for the contents they hold.
Here an example via flex:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: black;
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex: 1;
display: flex;
}
.bandeau {
height: 100px;
background: white;
margin: 0 50px;
}
.menuGauche {
width: 50px;
background: lightblue;
}
.ecran {
background: lightgreen;
flex: 1;
}
.menuDroite {
width: 50px;
background: lightblue;
}
.pied {
height: 80px;
background: white;
margin: 0 75px;
}
<header class="bandeau"></header>
<main>
<div class="menuGauche"></div>
<div class="ecran">Play the snippet full page or play with:https://codepen.io/anon/pen/rJMrgz.</div>
<div class="menuDroite"></div>
</main>
<footer class="pied"></footer>
Here is a tutorial (among others) to start with : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
( 101 advises : for french readers https://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html )
You can use the display:table on some elements to achieve the result. so wrap your main content then display it as table.
html,
body {
height: 100%;
}
body{
margin: 0;
padding: 0;
background: black;
}
.bandeau{
height: 100px;
background: white;
margin: 0 50px;
}
.content-wrapper {
display: table;
height: calc(100% - 180px);
width: 100%;
}
.content-wrapper > div{
display:table-cell;
}
.menuGauche,
.menuDroite{
width: 100px;
background: lightblue;
}
.ecran{
background: lightgreen;
}
.pied{
height: 80px;
background: white;
margin: 0 75px;
}
<body>
<div class="bandeau"></div>
<div class="content-wrapper">
<div class="menuGauche"></div>
<div class="ecran"></div>
<div class="menuDroite"></div>
</div>
<div class="pied"></div>
</body>
Related
i've making a layout using flexbox of a how a typical website looks like ,but i've got a few questions and a couple problems . My first question is that how can i improve this layout? and the problem I'm having is that i cant put the main__content in color black in between aside..
*{
margin: 0;
padding:0;
line-height: 1.3em;
color: black;
font-size: 40px;
}
body{
background: lightslategray;
}
.header{
display: flex;
}
.zero{
height: 100vh;
width: 200px;
background: violet;
}
.one{
height: 200px;
width: 200px;
background: blue;
flex-grow: 2;}
.two{
height: 200px;
width: 200px;
background: red;
flex-grow: 2;
}
.aside {
display: flex;
}
.three{
height: 200px;
width: 200px;
background: green;
}
.four{
height: 100vh;
width: 200px;
background: yellow;
margin-left: auto;
}
.main .content{
height: 50vh;
width: 40vh;
background-color: black;
}
<body>
<div class="header">
<div class="one">content</div>
<div class="two">content</div>
<div class="three">content</div>
</div>
<div class="aside">
<div class="zero">sidebar</div>
<div class="four">sidebar</div>
</div>
<div class="main">
<div class="content">Main__content</div>
</div>
</body>
Here your are trying to apply styles to both the main and content
.main .content{
height: 50vh;
width: 40vh;
background-color: black;
}
so the child div (content) has height and width same as its parent div(main)
Try to apply:
.main {
height: 50vh;
width: 40vh;
background-color: black;
}
.content {
color: brown;
height: 100px;
font-size: 20px;
}
Here's my code for my small project (I'm very new to this):
body {
background-color: #242424;
}
.page-wrap {
width: 90%;
margin: 0 auto;
height: 98vh;
}
.buildings-wrap {
width: 95%;
margin: 0 auto;
height: 100%;
text-align: middle;
}
.rectangle {
height: 650px;
background-color: lightblue;
width: 215px;
}
.add_btn {
border-radius: 50%;
background-color: lightcyan;
text-align: center;
line-height: 150px;
height: 150px;
width: 150px;
margin: 0 auto;
font-size: 100px;
font-weight: 900;
position: fixed;
top: 85%;
}
<div class="page-wrap">
<div class="buildings-wrap">
<br/>
<div class="rectangle"></div>
<hr style="position: fixed;top: 80%;color: white;width: 84%;" />
<button class="add_btn">+</button>
</div>
</div>
Here's what it looks like. The arrow show where I would like them to be.
I can't figure out how to do this:
In order to align the rectangle above the hr tag, you can simply give it a display of block and a margin of auto. This will center the rectangle relative to the container.
As for aligning the add button to the center while keeping it fixed, you can wrap the button in a div, give that div a position of fixed and a width of 100%. Then give it a display of flex and justify-content of center. This will center align any children that are in the div.
Depending on how low you want the add button, you can set the bottom property for the newly create div. At the moment I have it at -125px. It's also better to use bottom and pixels as the units because the other elements have fixed sizes.
body{
background-color: #242424;
}
.page-wrap {
width: 90%;
margin: 0 auto;
height: 98vh;
}
.buildings-wrap{
width: 95%;
margin: 0 auto;
height: 100%;
text-align: middle;
}
.rectangle{
height: 650px;
background-color: lightblue;
width: 215px;
display: block;
margin:auto;
}
.add_btn{
border-radius: 50%;
background-color: lightcyan;
text-align: center;
line-height: 150px;
height: 150px;
width: 150px;
margin: 0 auto;
font-size: 100px;
font-weight: 900;
}
hr{
margin: 0 auto 0 auto;
}
<div class="page-wrap">
<div class="buildings-wrap">
<br/>
<div style="display: flex; margin: auto;"><div class="rectangle"></div></div>
<hr/>
<div style="width: 100%; display:flex; justify-content: center;position: fixed; bottom: -125px; left: 0;"><button class="add_btn">+</button></div>
</div>
</div>
Please view in full-page view
Hope this helps
body {
background-color: #242424;
}
.page-wrap {
width: 90%;
margin: 0 auto;
height: 98vh;
}
.buildings-wrap {
width: 95%;
margin: 0 auto;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
}
.rectangle {
height: 81vh;
background-color: lightblue;
width: 200px;
}
.add_btn {
border-radius: 50%;
background-color: lightcyan;
text-align: center;
line-height: 50px;
height: 16vh;
width: 120px;
margin: 0 auto;
font-size: 100px;
font-weight: 600;
position: fixed;
top: 84%;
}
<div class="page-wrap">
<div class="buildings-wrap">
<br/>
<div class="rectangle"></div>
<hr style="position: fixed;top: 80%;color: white;width: 84%;" />
<button class="add_btn">+</button>
</div>
</div>
There is a main div (#root) in which I need 4 inner divs, each one on one side fully stretched (run code snippet to see).
Right now I'm in here:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
height: 100%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top {
height: 48px;
width: 100%;
}
.tray-bottom {
height: 48px;
width: 100%;
align-self: flex-end;
}
.tray-left {
width: 48px;
}
.tray-right {
width: 48px;
}
<div id="root">
<div class="tray tray-top">top</div>
<div class="tray tray-left">left</div>
<div class="tray tray-right">right</div>
<div class="tray tray-bottom">bottom</div>
</div>
Now I want left and right to stretch fully between top and bottom.
Please note that all trays have a fixed width (left, right) or fixed height (top, bottom).
I'd avoid nesting more divs into the existing ones.
Flexbox is not a must but I found it easy and future-proof compared to other possibilities.
A simple float configuration can do this without flexbox:
html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 100%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height:48px;
clear: both;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
}
.tray-right {
float: right;
}
/* to align vertically the content */
.tray-left::before,
.tray-right::before {
content:"";
display:inline-block;
height:50%;
}
<div id="root">
<div class="tray tray-top">top</div>
<div class="tray tray-left">left</div>
<div class="tray tray-right">right</div>
<div class="tray tray-bottom">bottom</div>
</div>
CSS-Grid can do that:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr auto;
height: 100%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top {
height: 48px;
grid-column: 1 / -1;
}
.tray-bottom {
height: 48px;
grid-column: 1 / -1;
}
.tray-left {
width: 48px;
}
.tray-right {
width: 48px;
grid-column:3;
}
<div id="root">
<div class="tray tray-top">top</div>
<div class="tray tray-left">left</div>
<div class="tray tray-right">right</div>
<div class="tray tray-bottom">bottom</div>
</div>
For some reason, in an overflown container, the padding on the right side is not shown.
.parent {
background-color: orange;
width: 150px;
height: 50px;
overflow: auto;
padding-right: 15px;
}
.child {
background-color: blue;
width: 250px;
height: 100%;
margin: 0 10px;
}
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
<div class="parent">
<div class="child">
</div>
</div>
I expected the orange color to show up when I scrolled to the very end (right)
Let's start without applying any overflow property. We clearly have the element outside of it's parent container (add padding of the container will remain inside):
.parent {
background-color: orange;
width: 150px;
height: 100px;
padding:15px;
}
.child {
background-color: blue;
width: 250px;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
<div class="parent">
<div class="child">
</div>
</div>
Now by adding overflow:scroll or overflow:auto you will simply add the scroll to see the overflowing part and you won't have the padding as excepted:
.parent {
background-color: orange;
width: 150px;
height: 100px;
overflow:auto;
padding:15px;
}
.child {
background-color: blue;
width: 250px;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
<div class="parent">
<div class="child">
</div>
</div>
Same logic with the margin right. When the element is overflowing there is no room to add margin between the inner element and the parent element.
I have checked in also Mozilla Firefox. and it's working fine.
.parent {
background-color: orange;
width: 150px;
height: 50px;
overflow-y: hidden;
overflow-x: auto;
padding-right: 15px;
}
.child {
background-color: blue;
width: 250px;
height: 100%;
margin: 0 10px;
display: inline-block;
}
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
<div class="parent">
<div class="child">
</div>
</div>
You should use below CSS. It's working for me.
.parent {
background-color: orange;
width: 150px;
height: 50px;
padding-right: 15px;
overflow-y: hidden;
overflow-x: auto;
}
.child {
background-color: blue;
width: 250px;
height: 100%;
margin: 0 10px;
display: inline-block;
}
I am trying to make a header for a site that has a logo in the left column, and a rotating image banner and the top-level navigation on the right, without using floats. What am I doing wrong here?
This is what I would like it to look like:
Here is my HTML:
<!doctype html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<div id="logo"><p>Logo</p></div>
<div id="right">
<div id="rotator"><p>Rotator</p></div>
<div id="navigation"><p>Navigation</p></div>
</div>
</div>
</body>
</html>
Here is my CSS:
#header{
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
top: 10px;
font-size: 0px;
}
#logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
}
#right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
}
#rotator{
display: block;
background-color: green;
width: 718px;
height: 132px;
}
#navigation{
display: block;
background-color: blue;
width: 718px;
height: 60px;
}
p{
font-size: 24px;
margin:0;
padding: 0;
}
This is what it ends up looking like:
Try putting vertical-align: top; on the logo and right divs
Here's the fiddle
#logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
vertical-align: top;
}
#right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
vertical-align: top;
}
#right {
background-color: black;
font-size: 0;
height: 192px;
position: absolute;
right: 168px;
top: 28px;
width: 718px;
}
Here's one way to do it using display:table & table-cell.
http://jsfiddle.net/zR9GZ/
<div class="container">
<div class="col1">LOGO</div>
<div class="col2">
<div class="rotator">ROTATOR</div>
<div class="navigation">NAVIGATION</div>
</div>
</div>
.container {
display: table;
width: 100%;
color:# fff;
}
.col1, .col2 {
display: table-cell;
}
.col1 {
background: red;
width: 25%;
}
.col2 {
width: 75%;
}
.rotator {
background: green;
}
.navigation {
background: blue;
}
Though flexbox isn't quite ready for production designs, here's what a responsive solution would look like (try resizing it!):
#header {
display: flex;
flex-flow: row wrap;
}
#header{
background-color: yellow;
font-size: 0px;
}
#logo{
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
}
#right{
background-color: black;
font-size: 0px;
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-width: 40%;
}
#rotator{
background-color: green;
flex: 2 1 auto;
}
#navigation{
background-color: blue;
flex: 1 1 auto;
}
http://jsfiddle.net/2UjC3/ (prefixes not included)
Until enough browsers support flexbox, my recommendation is to use the display table/table-cell solution by Billy Moat.