I am trying to solve the issue with a floating sidebar.
I created blog-styled site, which has sidebar on the right of the text. The first page worked well and when changing the post of the page 2, the sidebar is not floating to the right anymore. Can somebody tell why it happens? Thanks.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1148px;
margin: 20px auto;
}
.blog-post {
width: 80%;
/*background-color: rgba(100,134,134,.2);*/
float: left;
padding-right: 30px;
position: relative;
}
.other-posts {
display: inline-block;
width: 20%;
/*background-color: rgba(100,10,134,.2);*/
float: left;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
h1,
h2 {
margin: 20px 0;
}
p {
text-align: justify;
margin-bottom: 15px;
line-height: 130%;
}
.author-box {
border-top: 1px solid #808080;
padding-top: 20px;
padding-bottom: 20px;
}
.other {
margin-bottom: 30px;
}
.author-text {
font-size: 22px;
float: left;
margin: 30px 10px;
}
.author-box img {
height: 100px;
width: 100px;
border-radius: 50%;
float: left;
margin-bottom: 20px;
}
.date {
position: absolute;
top: 30px;
right: 30px;
}
.other a {
text-decoration-line: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Test with CSS/a blog</title>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<div class="container">
<div class="blog-post">
<h1>This is my second blog build</h1>
<p class="date">April 9th, 2019</p>
<h2>Yeah, we talk about delphins again.</h2>
<p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse<br> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="other-posts">
<div class="other">
The first post. What is the future of the TV.
</div>
<div class="other">
The second post. Yeah, we talk about delphins again.
</div>
<div class="other">
The third post. What should you know about CSS grid.
</div>
</div>
<div class="clearfix"></div>
<div class="author-box">
<img src="https://randomuser.me/api/portraits/women/66.jpg">
<p class="author-text">mrs Janet Gonzales</p>
</div>
</div>
<!-- container ending div -->
</body>
</html>
Looks like you're missing a closing </div> tag for <div class="blog-post">. Insert a closing tag and I think you'll get what you're after.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1148px;
margin: 20px auto;
}
.blog-post {
width: 80%;
/*background-color: rgba(100,134,134,.2);*/
float:left;
padding-right: 30px;
position: relative;
}
.other-posts {
display: inline-block;
width: 20%;
/*background-color: rgba(100,10,134,.2);*/
float: left;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
h1,h2 {
margin: 20px 0;
}
p {
text-align: justify;
margin-bottom: 15px;
line-height: 130%;
}
.author-box {
border-top: 1px solid #808080;
padding-top: 20px;
padding-bottom: 20px;
}
.other {
margin-bottom: 30px;
}
.author-text {
font-size: 22px;
float: left;
margin: 30px 10px;
}
.author-box img {
height: 100px;
width: 100px;
border-radius: 50%;
float: left;
margin-bottom: 20px;
}
.date {
position: absolute;
top: 30px;
right: 30px;
}
.other a {
text-decoration-line: none;
}
<div class="container">
<div class="blog-post">
<h1>This is my second blog build</h1>
<p class="date">April 9th, 2019</p>
<h2>Yeah, we talk about delphins again.</h2>
<p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br>
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="other-posts">
<div class="other">
The first post. What is the future of the TV.
</div>
<div class="other">
The second post. Yeah, we talk about delphins again.
</div>
<div class="other">
The third post. What should you know about CSS grid.
</div>
</div>
<div class="clearfix"></div>
<div class="author-box">
<img src="https://randomuser.me/api/portraits/women/66.jpg">
<p class="author-text">mrs Janet Gonzales</p>
</div>
</div> <!-- container ending div -->
Related
Can someone please tell me how to make text in the boxes can be pushed down to stop overlapping and text shouldn't go out of the box? Also, I need some margin in the column boxes.
There are media queries and ignore that one. I just want to know how to change the CSS so that text is not overflowing from the box and I don't want to use the overflow property also. Also how to give the margin to the column boxes provided boxes remain in the line.
Code CSS and HTML -->
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Impact, Charcoal, sans-serif;
}
div.row div {
background-color: gray;
border: 1px black solid;
position: relative;
}
.heading{
margin: 30px;
margin-bottom: 70px;
text-align:center;
}
/*For large devices*/
#media (min-width: 992px){
.col-lg-3{
float : left;
width: 33.33%;
}
}
/*For medium devices*/
#media (min-width: 768px) and (max-width: 991px){
.col-md-2{
float:left;
width: 50%;
}
.col-md-12{
float: left;
width: 100%;
}
}
/*For small devices*/
#media (max-width: 767px){
.col-sm-12{
float:left;
width: 100%;
}
}
h2.item1 {
position: absolute;
background-color: orange;
top: 0;
right: 0;
padding: 2%;
}
h2.item2 {
position: absolute;
background-color: green;
top: 0;
right: 0;
padding: 2%;
}
h2.item3 {
position: absolute;
background-color: skyblue;
top: 0;
right: 0;
padding: 2%;
}
section {
padding: 2%;
}
<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Menu</h1>
<div class="row">
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item1">Chicken</h2>
<section class="desc1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui zfiofficia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item2">Beef</h2>
<section class="desc2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<h2 class="item3">Sushi</h2>
<section class="desc3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
</div>
</div>
</body>
</html>
By setting the position to absolute you are removing the html from the normal 'flow' of the document, so you can't apply normal css properties such as margin.
To circumvent this, you should float the h2's right instead and then apply a margin to prevent your text being hiddent under the element.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Impact, Charcoal, sans-serif;
}
div.row div {
background-color: gray;
border: 1px black solid;
position: relative;
}
.heading{
margin: 30px;
margin-bottom: 70px;
text-align:center;
}
/*For large devices*/
#media (min-width: 992px){
.col-lg-3{
float : left;
width: 33.33%;
}
}
/*For medium devices*/
#media (min-width: 768px) and (max-width: 991px){
.col-md-2{
float:left;
width: 50%;
}
.col-md-12{
float: left;
width: 100%;
}
}
/*For small devices*/
#media (max-width: 767px){
.col-sm-12{
float:left;
width: 100%;
}
}
h2.item1, h2.item2, h2.item3 {
background-color: orange;
padding: 2%;
display: inline-block;
float: right;
margin: .3rem;
}
h2.item2 {
background-color: green;
}
h2.item3 {
background-color: skyblue;
}
section {
padding: 2%;
}
.desc1, .desc2, .desc3{
padding: 1rem;
margin: 0.5rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Menu</h1>
<div class="row">
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item1">Chicken</h2>
<section class="desc1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui zfiofficia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item2">Beef</h2>
<section class="desc2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<h2 class="item3">Sushi</h2>
<section class="desc3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
</div>
</div>
</body>
</html>
I'm trying to figure it out why margin top "0" doesn't work, as you can see on the code there's a white space between menu and section, I can only fix it by using negative values which I don't want to... anyone can help me out with this?
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
body {
margin: auto;
width: 50%;
}
header {
background-image: url("medimare5.png");
background-repeat: no-repeat;
background-size: 318px 175px;
width: 318px;
height: 175px;
margin-top: 10px;
}
menu {
background-color: #70acdd;
text-align: center;
padding: 2%;
border-radius: 2em 2em 0 0;
}
ul, li {
display: inline;
padding: 1%;
font-weight: bold;
}
li:hover {
border-bottom: 3px solid #FFF;
}
a {
text-decoration: none;
color: #FFF;
}
section {
background-color: #70acdd;
height: 100%;
padding: 2%;
margin-top: -1.7%;
display: inline-block;
}
footer {
background-color: #70acdd;
padding: 2%;
border-radius: 0 0 2em 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>
Medimare
</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
</header>
<menu>
<ul>
<li>Inicio</li>
<li>Consultas</li>
<li>Conócenos</li>
<li>Contacta</li>
</ul>
</menu>
<section>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</section>
<footer>
<p>Medimare 2020 © Todos los derechos reservados.</p>
</footer>
</body>
</html>
Maybe I should start using divs? I don't know..
Thank you everyone!
The problem when you set margin-top: 0 on the section is that the menu has bottom margin. If you set margin-bottom: 0 on the menu, it should work as you expect
I don't think this requires explanation
menu {
margin-bottom: 0;
}
I am creating a layout but I am getting some issue with the position.
I tried position: absolute but I am getting some issue.
I user display: flex and flex:1 for display the equal height of the div.
Would you help me out in this?
I tried below code to set.
.set_white_box{
position: absolute;
width: 50%;
top: 50%;
transform: translateY(-50%);
}
I added a simple structure in the snippet.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
you can use transform to move the image around and z-index to change order
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
/* translate to move it around */
transform: translate(-50px, 50px);
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
/* z-index to bring text to front */
position:relative;
z-index: 2;
}
/* jsut using nth-child to target the 2nd version */
.equal_padding:nth-child(even) .service_img_col {
transform: translate(50px, -50px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
Please try following code. also you can add multiple box no change design and looking good with left & right side align
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.equal_padding:nth-child(2n + 1) .service_img_col {
position: relative;
left: -50px;
top: 30px;
}
.equal_padding:nth-child(2n + 2) .service_img_col {
position: relative;
right: -50px;
top: -30px;
}
.equal_padding:nth-child(2n + 1) {
padding-left: 50px;
}
.equal_padding:nth-child(2n + 2) {
padding-right: 50px;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
border: 4px solid #000;
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
position: relative;
z-index: 9;
border: 4px solid #000;
}
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
https://jsfiddle.net/drqjmssy/
From the jsfiddle link, I am trying to have "div class='main_content'" be the same vertical height as the "div class='sidebar'". How does one accomplish that? If you can't load the fiddle or it's awful formatting, here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My project</title>
<style>
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav > ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
</style>
</head>
<body>
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<footer>
© Yazen 2018.
</footer>
</div>
</body>
</html>
Sorry if any of this is confusing./////////////////////////////////////////////////////////////////////////////////
You could wrap the elements in a new tag (I've used section) and add display: flex.
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav>ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
section {
display: flex;
}
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<section>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</section>
<footer>
© Yazen 2018.
</footer>
</div>
I am having an issue with an :after element. I am using it for an underline in a header. For some reason, it is disturbing the flow of the page. Instead of the title being at the top/centered, on my actual page the title is going into the text under it and aligned left.
This is what is looks like:
I was unable to replicate the issue within a fiddle or snippet, so I was wondering if there is anything within my code that may be causing this. The issue is arising in both Chrome and Firefox.
jsfiddle
.section {
padding: 70px 0;
height: auto;
position: relative;
}
.section-wrap {
margin: 70px 13%;
position: relative;
height: auto;
}
.section-main-title-wrap {
width: 100%;
display: block;
position: relative;
}
.section-main-title {
position: relative;
color: blue;
font-family: 'Muli', sans-serif;
font-size: 1.8rem;
width: auto;
display: inline-block;
padding: .625rem 0;
margin-bottom: 40px;
}
.section-main-title:after {
content: "";
width: 80%;
height: 3px;
background: #489aad;
bottom: 0;
position: absolute;
left: 10%;
}
#home-box-container {
width: 100%;
height: auto;
display: block;
}
.home-box {
border-right: 2px solid #CDCDCD;
width: 30%;
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
.home-box:last-child {
border-right: none;
}
.home-box-title, .home-box-description {
color: #2c2b2c;
line-height: 1.4em;
}
.home-box-title {
margin-bottom: 25px;
font-family: 'Muli', sans-serif;
font-weight: 700;
font-size: 1.2rem;
text-align: center;
}
.home-box-description {
font-family: 'Roboto', sans-serif;
font-size: 1rem;
}
<section class="section">
<div class="section-wrap">
<div class="section-main-title-wrap">
<header class="section-main-title text-center">HELLO</header>
</div>
<div id="home-box-container" class="total-center">
<div class="home-box">
<h3 class="home-box-title">Paradigm</h3>
<p class="home-box-description">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div><div class="home-box">
<h3 class="home-box-title">Structure</h3>
<p class="home-box-description">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div><div class="home-box">
<h3 class="home-box-title">Integration</h3>
<p class="home-box-description">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
</section>