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>
Related
I am sure this is really easy but I am facing issue the image is overflowing the card-box section
Wanted to achieve similar to this
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!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>Product</title>
</head>
<body>
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
tried to change height and width of container, tried changing display of image class to block but no change is shown in output
My output:
enter image description here
Expecting
enter image description here
I'm not sure flex is the best answer to do that. Personally I would prefer grid.
Display grid for the card, position left and right (image, details) inside.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body {
background-color: hsl(30, 38%, 92%);
}
.container {
display: flex;
justify-content: center;
position: relative;
z-index: -1;
border: 1px solid black;
}
.product {
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image {
grid-area: 1 / 1 / 2 / 2;
height: 100%;
width: auto;
}
.details {
grid-area: 1 / 2 / 2 / 3;
}
img {
max-width: 100%;
height: 100%;
border-radius: 1.5em 0 0 1.5em;
}
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
This may be a way to solve it: just add style="overflow:hidden;" to your code. Or you can try to use "border-radius:20px;" to hide it.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!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>Product</title>
</head>
<body>
<div class="container">
<section class="card-box" style="overflow:hidden;">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
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>
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>
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
Header
</header>
<nav>
Nav
</nav>
<article>
Article
</article>
<div>
<aside>
Aside
</aside>
<section>
Section
</section>
</div>
<footer>
Footer
</footer>
<body>
</body>
</html>
CSS Code:
header {
background-color: cornflowerblue;
height: 60px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
nav {
background-color: khaki;
height: 50px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
article {
background-color: darkseagreen;
height: 180px;
padding: 0px;
margin: 0px;
width: 70%;
display: inline-block;
text-align: center;
}
div {
padding: 0px;
margin: 0px;
float: right;
display: inline-block;
width: 30%;
}
aside {
background-color: goldenrod;
height: 90px;
padding: 0px;
margin: 0px;
text-align: center;
}
section {
background-color: lightsteelblue;
height: 90px;
padding: 0px;
margin: 0px;
text-align: center;
}
footer {
background-color: lemonchiffon;
height: 40px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
body {
background-color: black;
font-size: 2em;
height: 60px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
Very basic coding, just trying to understand how to make a responsive page.
Im trying to make it so when the device width is less than 800 px, all elements should stack above each other
And when the device is less than 500px all elements should stack above each other but the Aside and Section elements should disappear.
I figured I need to use viewport, and found a tutorial with code like this:
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
...continued
}
Not sure if that's the type of code I need to add to my CSS page or if I'm just over complicating it which I do often.
Okey I think,You should try it
#media only screen (min-width:500px) and (max-width: 800px) {
aside {
display:none
}
section {
display:none
}
}
and this may be help you https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
I'm trying to accomplish something very simple. My poor rusty CSS skills do not help one bit.
This is want to achieve:
I cannot make it happen. If I use height: 100% it works when there isn't much text, but when I add a lot of Lorem Ipsum, the content div gets stretched and the left menu div doesn't scale with it.
I don't want to use JavaScript, just clean CSS if it's that's possible.
HTML:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content (paste a lot of lorem ipsum here and menu doesn't stretch)</div>
</body>
</html>
CSS
body
{
margin: 0;
height: 100%;
background-color: gray;
}
#header
{
height: 50px;
background-color: white;
border: 1px solid black;
}
#menu
{
width: 225px;
float: left;
height: calc(100% - 50px);
background-color: white;
border: 1px solid black;
}
#content
{
overflow: auto;
background-color: white;
border: 1px solid black;
}
Flexbox can do that.
Codepen Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
height: 50px;
background: #bada55;
}
section {
display: flex;
flex: 1;
background: #c0ffee;
}
aside {
width: 150px;
background: darkgoldenrod;
}
main {
min-height: 100%;
/*height: 2000px;*/ /* uncomment this to see difference */
background: blue;
flex: 1;
}
<header></header>
<section>
<aside></aside>
<main></main>
</section>
try to give height relative to viewport height. vh
height:100vh;