This question already has an answer here:
Border is missing
(1 answer)
Closed 2 years ago.
The HR displayed perfectly fine until I changed its class attributes. The intention was to change a basic black line to a different color, and size. No error messages, and upon inspection in Chrome Dev Tools, the horizontal rule is loading, but not displaying. I have changed the attributes in Chrome Dev and in my IDE with no success. It should display a thick red HR.
body {
margin: 0;
text-align: center;
font-family: serif;
}
h1 {
margin-top: center;
font-family: cursive;
}
h2 {
margin-top: center;
font-family: sans-serif;
}
h3 {
margin-top: center;
font-family: sans-serif;
}
hr {
border: 10px red;
border-radius: 3px;
}
p {
font-family: sans-serif;
}
<div class="class1">
<h2>Header 2</h2>
<div class="class1-row">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu.</p>
</div>
<hr>
<div class="class2">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, biben</p>
</div>
Add some border-style:
hr{
border: 10px solid red;
border-radius: 3px;
}
Add solid to your border:
border: 5px solid red;
body {
margin: 0;
text-align: center;
font-family: serif;
}
h1 {
margin-top: center;
font-family: cursive;
}
h2 {
margin-top: center;
font-family: sans-serif;
}
h3 {
margin-top: center;
font-family: sans-serif;
}
hr {
border: 10px solid red;
border-radius: 3px;
}
p {
font-family: sans-serif;
}
<div class="class1">
<h2>Header 2</h2>
<div class="class1-row">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu.</p>
</div>
<hr>
<div class="class2">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, biben</p>
</div>
Add solid attributes:
body {
margin: 0;
text-align: center;
font-family: serif;
}
h1 {
margin-top: center;
font-family: cursive;
}
h2 {
margin-top: center;
font-family: sans-serif;
}
h3 {
margin-top: center;
font-family: sans-serif;
}
hr {
border: 10px solid red; /* solid attributes */
border-radius: 3px;
}
p {
font-family: sans-serif;
}
<div class="class1">
<h2>Header 2</h2>
<div class="class1-row">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu.</p>
</div>
<hr>
<div class="class2">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, biben</p>
</div>
Related
I am a beginner front-end developer. I am currently creating a page consisting of subpages. The home page has:
At the very top of the menu
At the very bottom Footer
Title and text in the middle
The problem is that the title and text take up too little space on the page, so the Footer is not at the bottom, but right below this text. I would like the title and text to be right in the middle of the screen.
I tried using display: flex (text-align: center, justify-content: center), width, height, margin, padding, vw, position: relative/absolute etc. I have no idea how to do it. After all, I can't type in the padding, e.g. 10rem, because it will be unnatural.
const Main: React.FC = () => {
return (
<div className={styles.section}>
<div className={styles.position}>
<div className={styles.main}>
<div className={styles.title}>
<h1>
Lorem ipsum dolor sit amet
</h1>
</div>
<div className={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus convallis, diam vel faucibus
volutpat, eros arcu luctus arcu, in porta
dui quam quis leo.
</div>
</div>
</div>
</div>
);
};
export default Main;
.section {
padding: 2rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.position {
width: 60%;
align-items: center;
justify-content: center;
}
.main {
text-align: center;
}
.title {
font-size: 3.5rem;
padding-bottom: 2.2rem;
font-weight: 700;
}
.text {
font-size: 1.2rem;
line-height: 1.9rem;
padding-bottom: 2.3rem;
font-weight: 400;
}
Please help me what to do so that the whole thing is centered on the whole screen and the footer is at the bottom of the screen. :(
.section {
padding: 2rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.position {
width: 60%;
align-items: center;
justify-content: center;
}
.main {
text-align: center;
}
.title {
font-size: 3.5rem;
padding-bottom: 2.2rem;
font-weight: 700;
}
.text {
font-size: 1.2rem;
line-height: 1.9rem;
padding-bottom: 2.3rem;
font-weight: 400;
}
<div class="section">
<div class="position">
<div class="styles.main">
<div class="title">
<h1>
Lorem ipsum dolor sit amet
</h1>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis, diam vel faucibus volutpat, eros arcu luctus arcu, in porta dui quam quis leo.
</div>
</div>
</div>
</div>
Hi how can I make the side menu to grow with the content of the parallel container, that should expand with its content as well.
I am trying to ensure that the left column enclosed in aside tag, is the same size as the content on the right enclosed in div column .right_panel. I was able to accomplish this by setting the size of html and body tag as well as .wrapper class to height: 100% as per similar queries on stackoverflow.
However now the .wrapper is not expanding when I add more content to main. I tried to change height to min-height but it shrink the aside to its content size.
I know I can accomplish this with flex layout but because flex is outside the scope of my course and also because I want to learn alternative approaches in case I would need to use them in the future for compatibility with the older browsers I am looking for solution that would not use flex layout.
Snippet below and JSFiddle link:
html,
body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: blue;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.wrapper {
margin: 10px auto 30px;
padding: 0;
width: 80%;
background-color: white;
height: calc(100% - 40px);
max-height: 100%;
}
aside.left_panel {
float: left;
min-height: 100%;
width: 130px;
background-color: #9eb9f1;
padding-left: 30px;
overflow: auto;
}
.right_panel {
margin-left: 160px;
}
nav ul {
list-style-type: none;
padding: 0;
}
header {
background-color: #6f90d1;
padding: 20px;
}
header h1 {
font-size: 60px;
color: darkblue;
}
main {
padding: 20px 20px 0;
}
main h2 {
color: #6f90d1;
}
main #lantern {
height: 400px;
width: 200px;
}
main img {
margin: 10px;
}
main h2{
margin-bottom: 30px;
}
main p {
margin-bottom: 30px;
}
footer {
text-align: center;
margin: 10px 0;
}
.f-right {
float: right;
overflow: auto;
}
.f-left {
float: left;
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>
<div class="wrapper">
<aside class="left_panel">
<nav>
<ul>
<li>Home</li>
<li>Manu item 1</li>
<li>Manu item 2</li>
<li>Manu item 3</li>
</ul>
</nav>
</aside>
<div class="right_panel">
<header>
<h1>Name of the website</h1>
</header>
<main>
<img id="lantern" class="f-right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/PlaceholderLC.png/600px-PlaceholderLC.png" alt="">
<h2>Subheading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. </p>
<h2>Subheading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius.</p>
</main>
<footer>
<p>Copyright © 2019</p>
</footer>
</div>
</div>
</body>
</html>
Using Table Layout
One solution is to use a table layout using display: table on the wrapper and making your left-section and right-section into a table-cell - see demo below:
html,body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: blue;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.wrapper {
margin: 10px auto 30px;
padding: 0;
width: 80%;
background-color: white;
height: calc(100% - 40px);
max-height: 100%;
display: table; /* added */
}
aside.left_panel {
/* float: left; */
min-height: 100%;
width: 130px;
background-color: #9eb9f1;
padding-left: 30px;
overflow: auto;
display: table-cell; /* added */
vertical-align: top; /* added */
}
.right_panel {
/*margin-left: 160px;*/
display: table-cell; /* added */
}
nav ul {
list-style-type: none;
padding: 0;
}
header {
background-color: #6f90d1;
padding: 20px;
}
header h1 {
font-size: 60px;
color: darkblue;
}
main {
padding: 20px 20px 0;
}
main h2 {
color: #6f90d1;
}
main #lantern {
height: 400px;
width: 200px;
}
main img {
margin: 10px;
}
main h2 {
margin-bottom: 30px;
}
main p {
margin-bottom: 30px;
}
footer {
text-align: center;
margin: 10px 0;
}
.f-right {
float: right;
overflow: auto;
}
.f-left {
float: left;
overflow: auto;
}
<div class="wrapper">
<aside class="left_panel">
<nav>
<ul>
<li>Home</li>
<li>Manu item 1</li>
<li>Manu item 2</li>
<li>Manu item 3</li>
</ul>
</nav>
</aside>
<div class="right_panel">
<header>
<h1>Name of the website</h1>
</header>
<main>
<img id="lantern" class="f-right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/PlaceholderLC.png/600px-PlaceholderLC.png" alt="">
<h2>Subheading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. </p>
<h2>Subheading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius.</p>
</main>
<footer>
<p>Copyright © 2019</p>
</footer>
</div>
</div>
Using Float
You can try this - but you don't get the overflow right or won't be able to make the height of the columns the same - see an example to fiddle with that:
html,body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: blue;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.wrapper {
margin: 10px auto 30px;
padding: 0;
width: 80%;
background-color: white;
height: calc(100% - 40px);
max-height: 100%;
overflow: hidden; /* to clear the float */
}
aside.left_panel {
float: left;
min-height: 100%;
width: 130px;
background-color: #9eb9f1;
padding-left: 30px;
overflow-y: auto; /*changed to overflow-y */
}
.right_panel {
float: left; /* added */
width: calc(100% - 160px); /* added */
/*margin-left: 160px;*/
}
nav ul {
list-style-type: none;
padding: 0;
}
header {
background-color: #6f90d1;
padding: 20px;
}
header h1 {
font-size: 60px;
color: darkblue;
}
main {
padding: 20px 20px 0;
}
main h2 {
color: #6f90d1;
}
main #lantern {
height: 400px;
width: 200px;
}
main img {
margin: 10px;
}
main h2 {
margin-bottom: 30px;
}
main p {
margin-bottom: 30px;
}
footer {
text-align: center;
margin: 10px 0;
}
.f-right {
float: right;
overflow: auto;
}
.f-left {
float: left;
overflow: auto;
}
<div class="wrapper">
<aside class="left_panel">
<nav>
<ul>
<li>Home</li>
<li>Manu item 1</li>
<li>Manu item 2</li>
<li>Manu item 3</li>
</ul>
</nav>
</aside>
<div class="right_panel">
<header>
<h1>Name of the website</h1>
</header>
<main>
<img id="lantern" class="f-right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/PlaceholderLC.png/600px-PlaceholderLC.png" alt="">
<h2>Subheading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. </p>
<h2>Subheading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius.</p>
</main>
<footer>
<p>Copyright © 2019</p>
</footer>
</div>
</div>
But there is a hack for that - using large margin & padding. Note that you need to remove the height and max-height set on the wrapper - see demo below:
html,body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: blue;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.wrapper {
margin: 10px auto 30px;
padding: 0;
width: 80%;
background-color: white;
/*height: calc(100% - 40px);
max-height: 100%;*/
overflow: hidden; /* to clear the float */
}
aside.left_panel {
float: left;
min-height: 100%;
width: 130px;
background-color: #9eb9f1;
padding-left: 30px;
overflow-y: auto; /*changed to overflow-y */
margin-bottom: -100000px; /* a large value */
padding-bottom: 100000px; /* a large value */
}
.right_panel {
float: left; /* added */
width: calc(100% - 160px); /* added */
/*margin-left: 160px;*/
margin-bottom: -100000px; /* a large value */
padding-bottom: 100000px; /* a large value */
}
nav ul {
list-style-type: none;
padding: 0;
}
header {
background-color: #6f90d1;
padding: 20px;
}
header h1 {
font-size: 60px;
color: darkblue;
}
main {
padding: 20px 20px 0;
}
main h2 {
color: #6f90d1;
}
main #lantern {
height: 400px;
width: 200px;
}
main img {
margin: 10px;
}
main h2 {
margin-bottom: 30px;
}
main p {
margin-bottom: 30px;
}
footer {
text-align: center;
margin: 10px 0;
}
.f-right {
float: right;
overflow: auto;
}
.f-left {
float: left;
overflow: auto;
}
<div class="wrapper">
<aside class="left_panel">
<nav>
<ul>
<li>Home</li>
<li>Manu item 1</li>
<li>Manu item 2</li>
<li>Manu item 3</li>
</ul>
</nav>
</aside>
<div class="right_panel">
<header>
<h1>Name of the website</h1>
</header>
<main>
<img id="lantern" class="f-right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/PlaceholderLC.png/600px-PlaceholderLC.png" alt="">
<h2>Subheading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. </p>
<h2>Subheading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius.</p>
</main>
<footer>
<p>Copyright © 2019</p>
</footer>
</div>
</div>
Using flexboxes
Last, but not the least; and since flexboxes have IE11+ and support in all modern browsers, I'd prefer it - thanks to you for letting me brush up on my knowledge too. :)
html,body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: blue;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.wrapper {
margin: 10px auto 30px;
padding: 0;
width: 80%;
background-color: white;
/*height: calc(100% - 40px);*/
/*max-height: 100%;*/
display: flex; /* added */
}
aside.left_panel {
/* float: left; */
min-height: 100%;
width: 130px;
background-color: #9eb9f1;
padding-left: 30px;
overflow-y: auto; /* changed to overflow-y*/
}
.right_panel {
/*margin-left: 160px;*/
}
nav ul {
list-style-type: none;
padding: 0;
}
header {
background-color: #6f90d1;
padding: 20px;
}
header h1 {
font-size: 60px;
color: darkblue;
}
main {
padding: 20px 20px 0;
}
main h2 {
color: #6f90d1;
}
main #lantern {
height: 400px;
width: 200px;
}
main img {
margin: 10px;
}
main h2 {
margin-bottom: 30px;
}
main p {
margin-bottom: 30px;
}
footer {
text-align: center;
margin: 10px 0;
}
.f-right {
float: right;
overflow: auto;
}
.f-left {
float: left;
overflow: auto;
}
<div class="wrapper">
<aside class="left_panel">
<nav>
<ul>
<li>Home</li>
<li>Manu item 1</li>
<li>Manu item 2</li>
<li>Manu item 3</li>
</ul>
</nav>
</aside>
<div class="right_panel">
<header>
<h1>Name of the website</h1>
</header>
<main>
<img id="lantern" class="f-right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/PlaceholderLC.png/600px-PlaceholderLC.png" alt="">
<h2>Subheading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. </p>
<h2>Subheading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius. Orci varius natoque penatibus et magnis dis parturient. </p>
<h2>Subheading 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim tristique varius.</p>
</main>
<footer>
<p>Copyright © 2019</p>
</footer>
</div>
</div>
You could remove the floats and set your wrapper to display: flex. Also remove the height properties on the wrapper and the margin-left on the right column.
I'm trying to align y text to a project, but whenever I do, the text aligns to the viewport. Whenever I try aligning the text, the text moves with the viewport vertically.
header {
height: 900px;
background-image: url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type {
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
position: relative;
top: 62px;
right: 13px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
position: relative;
top: 90px;
}
.Phone {
text-align: center;
position: relative;
top: -567px;
}
.Down-Arrow {
text-align: center;
position: relative;
top: -574px;
}
<.content-alt {
float: left;
margin: -600px 1800px
}
> .content-alt2 {
display: none
}
.content {
display: none
}
.content2 {
display: none
}
.alternate {
display: none
}
.other {
text-align: center;
}
.near-bottom {
text-align: center;
}
footer {
word-spacing: 30px;
}
.footer {
font: 16px HelveticaNeue, sans-serif;
font-weight: 400;
}
.Image {
text-align: center;
}
<header>
<h1> <img style="vertical-align:middle" src="img/focus.png"/><span>Focus</span></h1>
<p>A landing page for your app with focus</p>
</header>
<div class="Phone">
<img src="img/iphone.png" />
</div>
<div class="content-alt">
<h2>Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="content">
<h2>Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="content-alt">
<h2>Another Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="content">
<h2>Another Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="alternate">
<h2>Get The App Today!</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id
sollicitudin ante lobortis at.</div>
</div>
<div class="other">
<h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
<div>Kyle Turner, Blogger</div>
</div>
<div class="Image">
<img src="img/people.png" />
</div>
<div class="near-bottom">
<h4>Say Hi & Get in Touch</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>
<footer>
<p>Contact Download Press Email Support</p>
</footer>
Any troubleshooting would be appreciated.
That's because you have the paragraph element set to position: relative. In this case, relative to the viewport. Get rid of that. You shouldn't be using relative positioning unless y absolutely required.
If you are trying to set the text to "vertical-align: middle" you should give it the display property: "display:table-cell" and its parent element the display property: "display:inline-table". That way your vertical align property will work without problems.
Here is a working example with floating elements for responsiveness on the page, hope that helps!
header{
height:250px;
background-image:url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type{
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
margin-top:60px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
}
.content-alt {
text-align:left;
float:left;
width:20%;
margin-left:20%;
}
.content-alt2 {
text-align:left;
float:left;
width:20%;
margin-left:20%;
margin-top:60px;
}
.content-alt2::before{
clear:both;
}
.content {
text-align:left;
float:left;
width:20%;
margin-left:20%;
}
.content2 {
text-align:left;
float:left;
width:20%;
margin-left:20%;
margin-top:60px;
}
Currently, I am using units: "vw" to make my textbox responsive.
First fiddle (Non-responsive): https://jsfiddle.net/jzhang172/w7yhd6xx/2/
#second{
height:635px;
background:gray;
}
#second-try{
height:635px;
}
.about-us-info {
margin: 0 auto;
width: 900px;
height: 313px;
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -450px;
top: 50%;
margin-top: -160px;
}
span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Second fiddle (Attempt at responsiveness using "vw"):https://jsfiddle.net/jzhang172/9Lagw1y6/1/
.section{
position:relative;
}
#second{
min-height:635px;
}
.about-us-info {
margin: 0 auto;
width: 46.9vw;
/* height: 16.3vw; */
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -23.4vw;
top: 50%;
margin-top: -160px;
}span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
width: 21.875vw;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
/*----Third section--------*/
#third{
min-height:488px;
background:gray;
}
#services-info{
margin-top:-125px;
border:2px solid white;
border-top:0px;
}
#services-header{
background:transparent;
color:white;
}
#services-paragraph{
color:white;
}
#services-header:before, #services-header:after {
content: "";
position: absolute;
height: 5px;
border-top: 2px solid white;
top: 19px;
width: 11.8vw;
}
#services-header:before {
right: 100%;
margin-right: .85vw;
}
#services-header:after {
left: 100%;
margin-left: .85vw;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div class="section" id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Here are some errors that I'd like to be corrected but not sure how to:
1.) Is VW being used properly here? Is there a better solution?
2.) I'd like the height of each section to expand based on the content within while maintaining a min-height of each section (635px for the first and 488 for the second) because right now when re-sizing the browser smaller, the content overlaps anything underneath it.
Is there any problem using this solution? Is there a better solution?
Is this it? If not, let me know.
body {margin: 0;}
.sections {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.sections section {
-webkit-box-flex: 1;
-webkit-flex: 1 0 50%;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sections section>div {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
padding: 35px 50px;
border:1px solid #333;
margin: 50px 0;
max-width: 50%;
box-sizing: border-box;
position: relative;
min-width: 50%;
-webkit-transition: min-width .3s ease-out;
transition: min-width .3s ease-out;
}
#second {
background-color: white;
color: #333;
}
#third >div {
border-color: white;
}
#third {
background-color: gray;
color: white;
}
.span-header {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
background-color: white;
padding: 0 1rem;
font-size: 1.8em;
text-transform: uppercase;
text-align: center;
-webkit-transition: font-size .3s ease-out;
transition: font-size .3s ease-out;
white-space: nowrap;
}
#third .span-header {
background-color: gray;
}
#media (max-width: 767px) {
.sections section>div{
min-width: 60%;
}
.sections section>div {
padding: 15px 30px;
}
.span-header {
font-size: 1.25em;
}
}
#media (max-width: 359px) {
.sections section>div{
min-width: calc(100vw - 120px);
}
.span-header {
white-space: initial;
}
}
<div class="sections">
<section id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
<section id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
</div>
Please note I've also made a few adjustments to the html markup. Cheers!
jsFiddle
Question 1
It is perfectly fine to use vw this way. Percentage widths can generally do the same things as vw, but since you have some nesting, you would have to mess with the parent's widths to make percentages work. (This use case was noted by Chris Coyier.)
The nesting I'm talking about is <div class="section">s. Since the margins on the <body element have not been reset, these sections (on some browsers) end up a little narrower than the viewport. To use percentages, you would have to do this:
/* Reset margins */
body, html {
margin: 0;
padding: 0;
}
/* Now use percentages */
.about-us-info {
width: 46.9%;
}
span.span-header {
width: 47.4%;
}
Note vw has more issues with browser support (look at the known issues tab).
Question 2
In the code given, the text boxes are using position: absolute as part of the centering. Absolute positioning takes elements out of the document flow, and that is the reason the sections are not expanding to fit the content. If you want them to expand properly, you will need to use a different centering technique.
CSS table centering (as shown in the link above) would work:
<!-- First wrap your text boxes with containers... -->
<div class="section" id="second">
<div class="container">
<div class="about-us-info">
<!-- ... -->
</div>
</div>
</div>
Then remove the current absolute-based centering on the text boxes and add the following:
/* Make the parent a table: */
.section {
display: table;
width: 100%;
}
/* Make the container a table cell and center it: */
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
what I'd like to achieve is a border-bottom 20px below my h1 tag in my sidebar and also have 20px of "white space" below my border-bottom. I'd also like to have this underneath my h1 tag in my content area.
Here's the link to what I have now
HTML:
<!-- SIDEBAR -->
<div id="sidebar">
<h1>Caul / Cbua</h1>
<div class="sidetext">
Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique.
</div>
<h1>Commit</h1>
<div class="sidelink">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
<!-- CONTENT -->
<div id="content">
<h1>News</h1>
<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />
<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>
<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />
<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>
</div>
CSS:
#sidebar {
background-color: #e7d9c9;
background-image: url('/imgs/map.png');
background-repeat: no-repeat;
position: absolute;
/* # */
height: 100%;
width: 318px;
float: left;
padding-bottom: 20px;
padding-top: 20px;
}
#sidebar h1 {
border-bottom: thick;
border-bottom-width: 75%;
}
.sidetext {
padding: 5px 20px;
font-size: 18px;
font-family: Helvetica Neue;
padding-bottom: 20px;
}
.sidelink {
padding-bottom: 20px;
margin: 0;
padding: 0;
width:300px;
}
.sidelink ul {
margin: 0;
padding: 0;
margin-left: 20px;
}
.sidelink li {
display: block;
list-style: none;
}
.sidelink li a {
display:block;
font-family: Helvetica Neue;
font-size:16px;
color:#FFF;
text-decoration:none;
background-color:#1e416f;
padding:5px;
border-left:10px solid #FFF;
padding-bottom: 20px;
}
.sidelink li a:hover {
border-left:14px solid #1e416f;
background-color:#e7d9c9;
color: #1e416f;
}
h5 {
font-family: Helvetica Neue: Light;
font-size: 24px;
color: #517f9c;
}
/* Content */
#content {
width: 642px;
float: right;
padding-top: 20px;
}
.article {
padding: 5px 20px;
}
.articleimg {
float: left;
padding-right: 25px;
}
Try this and see how you go
#sidebar h1 { border-bottom: 1px solid black; margin-bottom: 20px; }
h1 {
border-bottom: 20px solid #000000;
}
AND
h1 {
margin: 0 0 20px 0;
}
OR
h1 {
margin-bottom: 20px;
}
Combine both rules though... So more like this:
h1 {
margin: 0 0 20px 0;
border-bottom: 20px solid #000000;
}
#sidebar h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
If you want it for all h1
h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
Try this CSS:
div > h1 { border-bottom: 20px solid black; margin-bottom: 20px; }