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;
}
Related
I am trying to create a modal that has a footer and an header. The content has two columns: LeftSection and RightSection. I want to have the second column fill the height of the content depending on what the first columns height is (which can differ based on content). From the snippet, this means to have the black div go down as much as the red one does.
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
}
.RightSection {
width: 100%;
background-color: black;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
Do you want this?
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
position: sticky;
top: 0;
}
.RightSection {
width: 100%;
background-color: black;
position: sticky;
top: 0;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
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>
can you please help to get the below output in div using css. if you can customize more it will be much more help full.
You could do something like this using Flexbox:
body {
padding: 5%;
}
.back-div {
width: 500px;
height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
.blue {
background: blue;
width: 400px;
height: 100px;
margin-bottom: 100px;
flex-shrink: 0;
margin-top: -45px;
text-align: center;
}
.yellow {
background: yellow;
width: 400px;
height: 100px;
flex-shrink: 0;
text-align: center;
}
<div class="back-div">
<div class="blue">
<h1> Text 1</h1>
</div>
<div class="yellow">
<h1> Text 2</h1>
</div>
</div>
Fiddle: https://jsfiddle.net/jdzgsxg4/
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 6 years ago.
I have a site with two columns, a content one and a menu one. The menu is fairly large and will sometimes be taller than the content pane. I basically have the following setup at the moment:
.container {
width: 300px;
margin: auto;
background: red;
}
#first {
width: 75%;
float: left;
background-color: blue;
}
#second {
width: 25%;
float: left;
background-color: green;
color: white;
}
#clear {
clear: both;
}
a {
color: white;
}
* {
color: white;
}
<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu</div>
<div id="clear"></div>
</div>
The #first div doesn't reach the bottom of the container, even when I add height: 100%;. How can I fix this?
You can use flexbox
.container {
width: 300px;
margin: auto;
background: red;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#first {
width: 75%;
float: left;
background-color: blue;
}
#second {
width: 25%;
float: left;
background-color: green;
color: white;
}
#clear {
clear: both;
}
a {
color: white;
}
* {
color: white;
}
<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu</div>
<div id="clear"></div>
</div>
You need a height on its parents all the way to the html/body tags
.container {
display: flex;
width: 300px;
margin: auto;
background: red;
}
#first {
flex: 1;
width: 75%;
background-color: blue;
}
#second {
flex: 1;
width: 25%;
height: 300px;
background-color: green;
color: white;
}
a {
color: white;
}
* {
color: white;
}
<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu</div>
</div>
For older browsers...display: table
.container {
display: table;
width: 300px;
margin: auto;
background: red;
}
#first {
display: table-cell;
width: 75%;
background-color: blue;
}
#second {
display: table-cell;
width: 25%;
height: 300px;
background-color: green;
color: white;
}
a {
color: white;
}
* {
color: white;
}
<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu</div>
</div>
you have to give the container an height because if not #first will be 100% of how what if the parent don't have a height the child can not be 100% of it!!
Maybe you give him 300px like the #second or less and then you give #first 100% and it will work
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.