This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
The task was to make up the following layout:
And I did it. But when I tried to add text to the blocks, I catch this problem:
The positioning of the elements is broken, I cant understand what is the reason. The code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<section class="content">
<div class="main">
<code class="description"><Section></code>
</div>
<aside class="attachment">
<div class="first">
<code class="description"><Aside 1></code>
</div>
<div class="second">
<code class="description"><Aside 2></code>
</div>
</aside>
</section>
</body>
CSS
/* Content */
.content {
width: auto;
height: auto;
margin: 20px;
}
.main {
display: inline-block;
width: 600px;
height: 700px;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-right: 150px;
text-align: center;
}
.attachment {
display: inline-block;
width: 600px;
height: 700px;
}
.attachment .first {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-bottom: 10%;
text-align: center;
}
.attachment .second {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
text-align: center;
}
.description {
position: relative;
font-size: 1.5em;
top: 45%;
}
I also tried to remove the second block of the attachment and then the elements were located correctly. I know there are many other ways to make up this layout. But I realy want know what is the reason of this bug. I need help with my problem.
You can use this code but you can read this to solve your problem
w3schools
.content {
width: auto;
height: auto;
margin: 20px;
display:flex;
align-items:center
}
.main {
display: inline-block;
width: 600px;
height: 700px;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-right: 150px;
text-align: center;
}
.attachment {
width: 600px;
height: 700px;
display: flex;
flex-direction: column;
justify-content:space-between
}
.attachment .first {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-bottom: 10%;
text-align: center;
}
.attachment .second {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
text-align: center;
}
.description {
position: relative;
font-size: 1.5em;
top: 45%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<section class="content">
<div class="main">
<code class="description"><Section></code>
</div>
<aside class="attachment">
<div class="first">
<code class="description"><Aside 1></code>
</div>
<div class="second">
<code class="description"><Aside 2></code>
</div>
</aside>
</section>
</body>
You can add vertical-align property to your .main element
/* Content */
.content {
width: auto;
height: auto;
margin: 20px;
}
.main {
display: inline-block;
width: 600px;
height: 700px;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-right: 150px;
text-align: center;
vertical-align: top;
}
.attachment {
display: inline-block;
width: 600px;
height: 700px;
}
.attachment .first {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-bottom: 10%;
text-align: center;
}
.attachment .second {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
text-align: center;
}
.description {
position: relative;
font-size: 1.5em;
top: 45%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<section class="content">
<div class="main">
<code class="description"><Section></code>
</div>
<aside class="attachment">
<div class="first">
<code class="description"><Aside 1></code>
</div>
<div class="second">
<code class="description"><Aside 2></code>
</div>
</aside>
</section>
</body>
Related
I have a logo on the far left. There is a div container in the middle and a div container on the far left. All packed together in a div container.
I have the middle container on margin: auto; adjusted so that it has the same distance on both sides.
The problem is that if I move the logo left or right, the middle container also moves. How can I ensure that the middle container always stays in the middle no matter what happens left or right?
body {
margin: 0%;
font-family: Arial, Helvetica, sans-serif;
}
.container1 {
height: 70px;
background-color: #e7e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.container12 {
margin-left: 50px;
}
.container12 h1 {
font-size: 20px;
}
.container13 {
margin-right: 25px;
}
.container13 a {
margin: 0%;
text-decoration: none;
color: black;
float: inline-start;
}
.container13 a:hover {
text-decoration: underline;
}
.trennlinie {
border-right: 1px solid grey;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 12.5px;
}
.trennliniehilfe {
padding-left: 12.5px;
padding-top: 15px;
padding-bottom: 15px;
}
.container2 {
height: 80px;
border-bottom: 1px solid rgb(187, 187, 187);
display: flex;
align-items: center;
}
.airbnblogo {
width: 50px;
}
.airbnbcont {
margin-left: 110px;
;
}
.mittecontainer {
display: flex;
margin: auto;
float: inline-start;
background-color: rgb(214, 212, 212);
border: 2px solid black;
border-radius: 15px;
padding-right: 5px;
}
.mittecontainer p {
margin-left: 11.5px;
}
.part3 {
display: flex;
align-items: center;
margin-right: 35px;
}
.derretter {
margin-right: 15px;
}
.interneticon {
margin-right: 15px;
width: 30px;
}
.Pics img {
width: 250px;
vertical-align: middle;
}
.Pics {
display: flex;
justify-content: center;
margin-top: 80px;
border: 2px solid white;
}
.p1 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.p2 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.Pics p {
display: flex;
justify-content: center;
}
.pics2 {
background-color: black;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
border-radius: 10px;
}
.pics2 p {
background-color: black;
color: white;
border: 2px solid white;
border-radius: 15px;
padding: 5px;
}
.pics2 p:hover {
background-color: white;
color: black;
}
.ia {
width: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Airbnb.com</title>
</head>
<body>
<div class="container1">
<div class="container12">
<h1>Hier kommt das Airbnb 2022: Winter-Update</h1>
</div>
<div class="container13">
<a class="trennlinie" href="">Film abspielen</a>
<a class="trennliniehilfe" href="">Alle Neuigkeiten entdecken</a>
</div>
</div>
<div class="container2">
<div class="airbnbcont">
<img class="airbnblogo" src="airbnb.png">
</div>
<div class="mittecontainer">
<p class="p1">Irgendwo</p>
<p class="p2">Eine Woche</p>
<p>Gäste hinzufügen</p>
</div>
<div class="part3">
<div class="derretter">
<p>Als Gastgeber:in loslegen</p>
</div>
<div class="interneticon">
<img class="ia" src="internet.png" alt="">
</div>
<div>
<img class="ia" src="menu.png" alt="">
</div>
</div>
</div>
<div class="Pics">
<div class="pics2">
<img src="din1.jpg"> <br>
<p>Jetzt Flug sichern!</p>
<p>Weitere Infos</p>
<p>Standort</p>
</div>
</div>
</body>
</html>
Inside the container2 class in the style tag, replace display: flex; to be display: grid; and add grid-template-columns: 25% 50% 25%;. Like this:
.container2 {
height: 80px;
border-bottom: 1px solid rgb(187, 187, 187);
display: grid;
grid-template-columns: 25% 50% 25%;
align-items: center;
}
And don't forget if there are too many CSS styles, then make an external CSS link so that giving css styles is easier.
I can't seem to be able to get my page to display fully (it simply stays on top). I tried doing .html{margin +height} or doing just .body{margin height}, as well as combining them, or adding flex box to the CSS class and nothing seems to work. It looks like this:
.body,
.html {
margin: 0%;
height: 100%;
}
#nav {
display: flex;
justify-content: flex-end;
margin: top 15px;
}
a {
margin-right: 20px;
}
#nav.topimage {
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
#nav.toplink {
width: 20px;
height: 20px;
}
#middle {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#logo {
text-align: center;
margin: top 300px;
}
#searchbarcontainer {
margin-top: 20px;
text-align: center;
}
#searchbar {
padding-top: 20px;
padding-bottom: 20px;
outline: 0;
width: 500px;
border-radius: 10px;
border: 2px solid chocolate;
}
#buttons {
margin-top: 30 pixels;
display: flex;
justify-content: center;
}
.button {
margin-left: 10px;
margin-right: 10px;
padding: 5px 10px;
cursor: pointer;
background: rgb(224, 224, 224);
border-radius: 3px;
}
#links {
text-align: center;
}
.body {
display: flex;
flex-direction: column-gap;
}
#footer-content {
background: rgb(221, 27, 27);
border-top: 1px solid blanchedalmond;
}
<!DOCTYPE html>
<html>
<head>
<title>google clone</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
<a class="toplink">gmail</a>
<a class="toplink">image</a>
<a class="topimage">xxx</a>
</div>
<div id="middle">
<div id="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
<div id="searchbarcontainer">
<input id="searchbar" type="text">
</div>
<div id="buttons">
<div class="button">
Google Search
</div>
<div class="button">
I am feeling lucky
</div>
</div>
<div id="links">
Google is offered in X
</div>
</div>
<div id="footer">
<div id="footer-content">
</div>
<a>xxx</a>
</div>
</div>
</body>
</html>
Nothing seems to work and I don't know if it has something to do with flex or my html.
See if this works. Run the snippet
If it works just copy my code and look at the adjustments i have made to your code.
.body,
.html {
margin: 0;
height: 100vh;
box-sizing: border-box;
}
section {
height: 100vh;
}
#middle-container{
height: 100%;
display:flex;
flex-direction: column;
justify-content:center;
}
#nav {
display: flex;
justify-content: flex-end;
padding-top: 15px;
}
a {
margin-right: 20px;
}
#nav.topimage {
width: 20px;
background: red;
border-radius: 50%;
}
#nav.toplink {
width: 20px;
}
#middle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#searchbarcontainer {
margin-top: 20px;
text-align: center;
}
#searchbar {
padding-top: 20px;
padding-bottom: 20px;
outline: 0;
width: 500px;
border-radius: 10px;
border: 2px solid chocolate;
}
#buttons {
margin-top: 30 pixels;
display: flex;
justify-content: center;
}
.button {
margin-left: 10px;
margin-right: 10px;
padding: 5px 10px;
cursor: pointer;
background: rgb(224, 224, 224);
border-radius: 3px;
}
#links {
text-align: center;
}
#footer-content {
background: rgb(221, 27, 27);
border-top: 1px solid blanchedalmond;
}
<!DOCTYPE html>
<html>
<head>
<title>google clone</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<section class="main">
<div id="nav">
<a class="toplink">gmail</a>
<a class="toplink">image</a>
<a class="topimage">xxx</a>
</div>
<div id="middle-container">
<div id="middle">
<div id="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
<div id="searchbarcontainer">
<input id="searchbar" type="text">
</div>
<div id="buttons">
<div class="button">
Google Search
</div>
<div class="button">
I am feeling lucky
</div>
</div>
<div id="links">
Google is offered in X
</div>
</div>
</section>
<div id="footer">
<div id="footer-content">
</div>
<a>xxx</a>
</div>
</div>
</body>
</html>
I currently studying HTML/CSS/DOM and I am a begginer. I tried to make an Instagram main page for practicing and improving my level. I will share my code, so you can understand what I'm trying to do!
This is HTML code
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
/*box-sizing: border-box;*/
}
#font-face {
font-family: instagramFont;
src: url("./westagram.ttf") format("opentype");
}
.wrapper {
margin: 10px 10px 10px 10px;
}
.wrapper .nav {
padding-top: 20px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: space-around;
border-bottom: solid 1px #dbdbdb;
position: fixed;
z-index: 99999;
/*포지션 여러개 썼을때 우선순위 설정 인덱스값이 클수록 우선순위*/
width: 100%;
}
.wrapper .nav .logo {
font-family: instagramFont;
font-size: 2rem;
padding-right: 100px;
}
.search-box {
margin-top: 5px;
width: 215px;
height: 28px;
}
.wrapper .nav .icons {
margin-left: 100px;
}
.wrapper .main {
position: relative;
/*포지션을 쓰면 위치 조정 top left right bottom*/
top: 90px;
width: 100%;
/*height: 900px;*/
background-color: yellow;
}
.wrapper .main .feeds {
position: relative;
top: 40px;
right: 5px;
left: 40px;
width: 60%;
height: 660px;
background-color: red;
}
.wrapper .main .feeds .article {
position: relative;
display: flex;
flex-direction: column;
top: 10px;
right: 10px;
left: 15px;
width: 95%;
height: 600px;
background-color: green;
}
. .wrapper .main .feeds .article .identi {
position: relative;
/*width: 97%;*/
/*height: 100px;*/
/*background-color: black;*/
}
.identi {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.wrapper .main .feeds .article .identi .selfi {
padding: 20px 20px 20px 20px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.wrapper .main .feeds .article .identi .id {
padding-top: 20px;
}
.wrapper .main .feeds .article .identi .fa {
padding-top: 20px;
padding-right: 20px;
}
.wrapper .main .feeds .article .pic {
position: relative;
width: 100%;
/*top: 10px;*/
height: 65%;
background-color: lightblue;
}
.wrapper .main .feeds .article .show-box {
position: relative;
width: 100%;
height: 15%;
background-color: lightcoral;
}
.wrapper .main .feeds .article .comment {
position: relative;
width: 100%;
height: 9%;
background-color: lightcyan;
}
.wrapper .main .feeds .article .name {
/*margin-left: 40px;*/
/*padding-bottom: 20px;*/
}
.wrapper .main .main-right {
position: absolute;
top: 40px;
right: 30px;
width: 30%;
height: 900px;
background-color: blue;
}
#compass {
width: 30px;
height: 30px;
}
#heart {
width: 30px;
height: 30px;
}
#my-page {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Westagram Main Page</title>
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<!-- header : segmantic tag -->
<div class="wrapper">
<div class="nav">
<p class="logo"> Westagram </p>
<input class="search-box" type="text" placeholder=" Search" , style="font-family:Arial, FontAwesome">
<div class="icons">
<img id="compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png">
<img id="heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png">
<img id="my-page" src=" https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png">
</div>
</div>
<div class="main">
<div class="feeds">
<div class="article">
<div class="identi">
<img class="selfi" src="about.png">
<span class="id"> Jiwan Jeon </span>
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</div>
<div class="pic">
</div>
<div class="show-box">
</div>
<div class="comment">
</div>
</div>
</div>
<div class="main-right">
</div>
</div>
</div>
</body>
</html>
According to the CSS file, I declare the height of each section for checking those sections in the right position. Based on my knowledge, If I delete the height, it would be automatically adjusted height(I mean Depending on the size of the screen window, the horizontal/vertical height will increase or decrease.) This is what was expected. However, the main and the height of the others is fixed... Could you help me out with this problem? I struggling with it the whole day :(
Thank you for your help in advance!
You can use vh (view height) ,em ,rem or percentage.
Example:
height: 120px;
height: 10em;
height: 75%;
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I've recently started doing frontend and I've run into a bit of a problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
You can run the code here. The problem is with aligning the red buttons with the navbar (header). The buttons are supposed to stretch from the top to the bottom of the navbar, but they aren't aligned to the top. This is caused by the head-title element. If the font size is set to 1em, then the problem disappears. Why is this happening? Any help is appreciated.
Set vertical-align: top; on the .head-button:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
Try adding vertical-align: top; to .head-button class so the blocks will be aligned to top.
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
Try using display:flex css property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
align-items: center;
}
.head-title {
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
margin-right: 8px;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
</style>
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
Try to use modern solution and !coding not a property such display: inline-block or vertical-align: top that almost is old and obsolete, in this case when you want to put element side by side and align them in a certain row you can use flex on their parents like below example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
With flex you can control parent and also child alignments! something like justify-content: center; or align-items: center;
Try this
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
/** My Code **/
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
width: 260px;
height: auto;
margin: 0 10px;
vertical-align: middle;
}
.head-button {
display: inline-block;
width: 80px;
line-height: 2.5em;
background-color: red;
text-align: center;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
I write a html page containing a header on top, following by a section part and an aside part, and then a footer part, and write some CSS codes for styling. here is the html and CSS code:
body{
width: 80%;
margin: 0 auto;
background-color: peachpuff;
}
header, section, aside, footer, article{
margin: 10px;
padding: 10px;
text-align: center;
background-color: aliceblue;
border: 1px solid cadetblue;
font-size: 2rem;
width: 100%;
box-sizing: border-box;
}
header>h1{
height: 100px;
font-size: 2.5rem;
text-shadow: 2px 2px 2px red;
}
article {
width: 85%;
margin: 0 auto;
}
section{
width: 60%;
height: 300px;
margin-right:3px;
display: inline-block;
/*float:left;*/
}
aside{
width: 37%;
margin-left:3px;
height: 300px;
float: right;
display: inline-block;
}
footer{
display: block;
width: 100%;
background-color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>This is header.</h1>
</header>
<section>
this is section.
<article>this is article.</article>
</section>
<aside>aside part.</aside>
<footer>this is footer.</footer>
</body>
</html>
I set width:100% for header and footer, and it should make then to stretch so fill all the body width, as body is their parent node. but I notice that it cause header and footer that go beyond the body width at right side! if I comment that, every thing will be fine, but why it doesn't work as expected?
and second question, I want section and aside to be located next to each other, and by setting float:right; for aside tag they are, but if I set float:left; for section element too, while they still are next to each other, footer become their background too! why that happens?
thanks.
The margin:10px; will push the header out of the body, remove the margin from the header and it works fine.
body{
width: 80%;
margin: 0 auto;
background-color: peachpuff;
}
header, section, aside, footer, article{
padding: 10px;
text-align: center;
background-color: aliceblue;
border: 1px solid cadetblue;
font-size: 2rem;
width: 100%;
box-sizing: border-box;
}
header>h1{
height: 100px;
font-size: 2.5rem;
text-shadow: 2px 2px 2px red;
}
article {
width: 85%;
margin: 0 auto;
}
section{
width: 60%;
height: 300px;
margin-right:3px;
display: inline-block;
/*float:left;*/
}
aside{
width: 37%;
margin-left:3px;
height: 300px;
float: right;
display: inline-block;
}
footer{
display: block;
width: 100%;
background-color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>This is header.</h1>
</header>
<section>
this is section.
<article>this is article.</article>
</section>
<aside>aside part.</aside>
<footer>this is footer.</footer>
</body>
</html>
body{
width: 80%;
margin: 0 auto;
background-color: peachpuff;
}
header, section, aside, footer, article{
margin: 10px 0 0 0;
padding: 10px;
text-align: center;
background-color: aliceblue;
border: 1px solid cadetblue;
font-size: 2rem;
width: 100%;
box-sizing: border-box;
}
header>h1{
height: 100px;
font-size: 2.5rem;
text-shadow: 2px 2px 2px red;
}
article {
width: 85%;
margin: 0 auto;
}
section{
width: 60%;
height: 300px;
margin-right:3px;
display: inline-block;
/*float:left;*/
}
aside{
width: 37%;
margin-left:3px;
height: 300px;
float: right;
display: inline-block;
}
footer{
display: block;
width: 100%;
background-color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>This is header.</h1>
</header>
<section>
this is section.
<article>this is article.</article>
</section>
<aside>aside part.</aside>
<footer>this is footer.</footer>
</body>
</html>