Jump to content

Horizontal and vertical div's


Recommended Posts

float and div properties with graphs, tables and explanations inside the divs


giving each div a height and width might simply you understanding of div relationships on your page  

Edited by niche
Link to comment
Share on other sites

Use flex box

	<!doctype html>
 <html lang="en">
<meta charset="utf-8">
 <title>Document Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="">
<!--<link rel="stylesheet" href="css/styles.css?v=1.0"> -->
*{box-sizing: border-box;}
.layout-wrap { display: flex; min-height: calc(1px  +  40vw);}
	.layout-col1{ display: flex; flex: 1 1 100%; max-width: 40%;}
.layout-col2{display: flex; flex: 1 1 100%; max-width: 60%;  flex-wrap: wrap; justify-content: space-evenly; }
.layout-col2 >div, .layout-col1 >div { margin: 10px; border: 3px solid #000;}
.div1 {flex: 1 1 auto;}
.div2 { flex: 1 1 auto; max-width: 40%;  margin-right: 5px;}
.div3 { flex: 1 1 auto; max-width: 60%; margin-left: 5px;}
.div4 { flex: 1 1 100%; max-width: calc(100% - 20px);}
<!--<script src="js/scripts.js"></script> -->
<div class="layout-wrap">
    <div class="layout-col1">
          <div class="div1"></div>
     <div class="layout-col2">
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>


  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...