I've added this image of piggy so it would be next to the text, but when I'm trying to add horizontal line and text, it doesn't show up under the image and texts but stays with image.Screenshot
HTML:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Sími portfólio</title>
<link rel="stylesheet" type="text/css" href="pokus1.css" />
</head>
<body>
<div id="hlavni">
<h1 id="nadpis"> XXXXXXXXXXXXXX </h1>
<p id="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In dapibus augue non sapien. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus.
Duis viverra diam non justo. Etiam posuere lacus quis dolor. Pellentesque arcu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nulla est.
Phasellus faucibus molestie nisl. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nam sed tellus id magna elementum tincidunt.
Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Integer tempor. Pellentesque arcu. </p>
</div>
<img src="tučík.png" alt="prasátko" id="prasatko">
<hr>
<p> . Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus.
Duis viverra diam non justo. Etiam posuere lacus quis dolor. </p>
</div>
</body>
</html>
CSS:
body {
display:block;
width: 800px;
margin-top: 10px;
margin-left: 550px;
margin-right: 550px;
background-image: url("pozadi.png");
overflow: hidden;
}
#hlavni {
clear: both;
overflow: hidden;}
#nadpis {
display:block;
background-color: grey;
font-size: 50px;
font-family: Garamond;
font-style: italic;
padding: 8px;
overflow: hidden;}
#text {
line-height: 30px;
font-size: 20px;
float: right;
clear: right;
width: 55%;
overflow: hidden;
}
#prasatko {
height: 300px;
width: 300px;
position: relative;
right: 60px;
bottom: 50px;
float: left;
clear: left;
overflow: hidden;
}
Thanks for your help, I've tried overflow: hidden or clear: both but nothing works
You have one DIV extra.
And also just do this:
<hr style="clear:both">
#hlavni {
clear: both;
overflow: hidden;
}
#nadpis {
display:block;
background-color: grey;
font-size: 50px;
font-family: Garamond;
font-style: italic;
padding: 8px;
overflow: hidden;}
#text {
line-height: 30px;
font-size: 20px;
float: right;
clear: right;
width: 55%;
overflow: hidden;
}
#prasatko {
height: 300px;
width: 300px;
position: relative;
right: 60px;
bottom: 50px;
float: left;
clear: left;
overflow: hidden;
}
<div id="hlavni">
<h1 id="nadpis"> XXXXXXXXXXXXXX </h1>
<p id="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In dapibus augue non sapien. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus.
Duis viverra diam non justo. Etiam posuere lacus quis dolor. Pellentesque arcu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nulla est.
Phasellus faucibus molestie nisl. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nam sed tellus id magna elementum tincidunt.
Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Integer tempor. Pellentesque arcu. </p>
<img src="tučík.png" alt="prasátko" id="prasatko" style="background:red">
<hr style="clear:both">
<p> . Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus.
Duis viverra diam non justo. Etiam posuere lacus quis dolor. </p>
</div>
After the end of your floating, add a <div> per example with clear:both
Related
I'm trying to float:right; image next to paragraph <p>, which are nested together in <div> container. The problem is that the parent <div> resize its height with the size of the text in the paragraph, that's good, but floated right image overflows the div, and same <div> didn't resize itself according to the image height.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*
overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container
*/
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<!--
<main>
<section>
-->
<img class="autoportrait" src="autoportrait.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>
I tried to use overflow: hidden; , but that works only for a single "post". When I try to put a second one, the same problem appears and length of the images that flows out of the 'content container' doubles.
I'm newbie in HTML/CSS and the code I write it's for my own knowledge. So I'll be grateful if we figure out something.
Greetings from Varna, Bulgaria!
Make the div to clear it's children using :after pseudo class.
.container{
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
border:1px solid red;
}
.content{
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container) */
}
.autoportrait{
width: 20%;
height: 20%;
/*max-width:205px;
max-height:265px;
margin-bottom: 25px;*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear:both;
}
.container:after {
visibility: hidden;
display:table;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class="content">
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
</p>
<!--</section>
</main>-->
</div>
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt.
Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem.
Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra.
Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui.
Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat.
Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula.
Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--</section>
</main>-->
</div>
</div>
Simplest solution is to use overflow: hidden; on .content .container.
I know you said you attempted it previously and even had it commented out in .content .container but it's working for me. Perhaps the issue was where/how you placed the second article in your markup.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
overflow: hidden;
border: 1px solid #ccc;
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
</div>
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>
What I'm trying to do is to center the text (and image that will be side by side or on top of the text) but the command justify-content:center doesn't work for me. It centers horizontally but not vertically. Could you tell me what went wrong? I'm actually a beginner and that's my first website.
Here's the code:
body {
font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
font-size: 3em;
text-transform:uppercase;
}
h4 {
font-size: 1.5em;
color:#9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height:100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height:100vh;
background-color:#ebebeb;
padding:0 7%;
}
.heading {
display:table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform:none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size:20px;
}
a {
color:#000000;
transition: ease-in-out 0.15s
}
a:hover{
color:#fbd505;
}
#content {
width: 100%;
height:100vh;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
p {
display:column;
vertical-align: middle;
max-width: 960px;
}
.content-heading-span {
display: block;
font-size: 32px;
margin-top: 0px;
text-transform:uppercase;
margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
</head>
<body>
<section id="welcome-screen">
<div class="heading">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</section>
<section>
<div id="content">
<div class="wrapper">
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
</body>
</html>
.wrapper, which is your flex container, doesn't have a height setting. Add height: 100%; to it and the vertical centering works. However, the parent of .wrapper (i.e. .content) has height: 100vh - if its content grows beyond that, it will be a mess (i.e. overlapping), so you might want to change its height setting to min-height instead of height
body {
font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
font-size: 3em;
text-transform:uppercase;
}
h4 {
font-size: 1.5em;
color:#9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height:100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height:100vh;
background-color:#ebebeb;
padding:0 7%;
}
.heading {
display:table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform:none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size:20px;
}
a {
color:#000000;
transition: ease-in-out 0.15s
}
a:hover{
color:#fbd505;
}
#content {
width: 100%;
min-height:100vh;
}
.wrapper {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
p {
display:column;
vertical-align: middle;
max-width: 960px;
}
.content-heading-span {
display: block;
font-size: 32px;
margin-top: 0px;
text-transform:uppercase;
margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
</head>
<body>
<section id="welcome-screen">
<div class="heading">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</section>
<section>
<div id="content">
<div class="wrapper">
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
</body>
</html>
It's because .wrapper is only as tall as the content inside of it, without a declared height that exceeds the content height. So there is no room for it to vertically center without a height that exceeds the content height. Adding height: 100vh; to .wrapper will force that.
what's up with the downvotes?
body {
font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
font-size: 3em;
text-transform:uppercase;
}
h4 {
font-size: 1.5em;
color:#9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height:100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height:100vh;
background-color:#ebebeb;
padding:0 7%;
}
.heading {
display:table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform:none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size:20px;
}
a {
color:#000000;
transition: ease-in-out 0.15s
}
a:hover{
color:#fbd505;
}
#content {
width: 100%;
height:100vh;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
p {
display:column;
vertical-align: middle;
max-width: 960px;
}
.content-heading-span {
display: block;
font-size: 32px;
margin-top: 0px;
text-transform:uppercase;
margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
</head>
<body>
<section id="welcome-screen">
<div class="heading">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</section>
<section>
<div id="content">
<div class="wrapper">
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
</body>
</html>
I am trying to implement the following:
You will see there is text and then a line to its side. I am trying to make the line remain the same distance from the text as the screen decreases in size. This works OK, but when the screen gets smaller the line goes into the 'Test Border' part.
See code below as to how I have implemented this. Perhaps I should be taking a different approach.
Also, a jsfiddle here for your convenience.
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: inline-block;
padding-bottom: 15px;
width: 8%;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: 90%;
}
<h3>Test Border</h3>
<div class="underline"></div>
You can display both blocks as table and specify first block fixed width (as it's only text that does not change).
.wrapper {
display: table;
width: 100%;
vertical-align: bottom;
padding-bottom: 15px;
table-layout: fixed;
}
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: table-cell;
width: 85px;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 100%;
position: relative;
top: -12px;
}
<div class="wrapper">
<h3>Test Border</h3>
<div class="underline"></div>
</div>
I'd probably use flex box like this.
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 10px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Test String</span>
<div class="line"></div>
</div>
This will make the title as wide as the longest unbroken work, and the border will fill up the rest of the space.
Here's what it looks like with paragraphs between each header (an almost real world example)
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 5px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Lorem ipsum dolor</span>
<div class="line"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus
sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit
sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis
magna dolor, vitae facilisis nibh euismod et.
</p>
<div class="border">
<span class="string">Etiam quis molestie</span>
<div class="line"></div>
</div>
<p>
Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus
tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at.
</p>
<div class="border">
<span class="string">Phasellus sed orci</span>
<div class="line"></div>
</div>
<p>
Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique
lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum,
ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia
commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula.
</p>
<div class="border">
<span class="string">Fusce ultricies ante</span>
<div class="line"></div>
</div>
<p>
Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum,
tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl
viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac
nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus.
</p>
I think the best solution is change the markup, because with your code the text in h3 tag could be bigger than your max-width (in fact, it is). Something like this:
.textline {
display: table;
}
h3 {
font-size: 26px;
color: #000 !important;
display: table-cell;
width: 9%;
margin-right: 1%;
vertical-align: bottom;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 90%;
position: relative;
top: -7px;
}
<div class="textline">
<h3>Test border</h3>
<div class="underline"></div>
</div>
When you use percentages you have to take into account the fixed measures of the other elements, width, margins, borders... Not the same 90% of a 1000px screen that one of 500px, the remaining space is less.
You can use calc to solve this issues:
h3 {
font-size: 26px;
color: #000 !important;
width: 95px;
display: inline-block;
padding-bottom: 15px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 100px);
}
<h3>Test Border</h3>
<div class="underline"></div>
You could try using a table display, with the text and line each having their own cell:
<div class="div-row">
<div class="div-cell"><h3>Test Border</h3></div>
<div class="div-cell underline"></div>
<div>
CSS:
.div-row {
display: table-row;
width: 100%;
}
.div-cell {
display: table-cell;
}
I haven't tested this, but the div containing the line should automatically shrink to the available width as your resize the browser window (or as you go from desktop to mobile).
If you want, you could also set a fixed width to the div containing the text.
You can try calc() property and it will work...
Check this fiddle here
What you have to do,
h3 {
font-size: 26px;
display: inline-block;
max-width:90px;
margin-right:10px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 104px);
}
Try the below CSS:
h3 {
font-size: 26px;
color: #000 !important;
display: inline-block;
padding-bottom: 15px;
}
.underline {
border-bottom: 1px solid #C6BCB6;
width: 90%;
}
This code works in Chrome as I want but not in IE or Firefox. To be more clear and satisfy SO constrains about the comment-code ratio in a post I'd like that only the content area being scrollable when the viewport goes bellow 300px or the content simply does not fit. Actually IE is my only concern. How could I achieve the same behavior under IE >= v10.
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
overflow: hidden;
}
#table {
display: table;
height: 100%;
width: 100%;
}
.navBar {
width: auto;
height: 72px;
overflow: auto;
border-bottom: 1px solid #bbb;
display: table-row;
}
.results {
background: gray;
width: 100%;
height: 100%;
overflow: auto;
display: table-row;
}
.results > div {
height: 100%;
overflow: auto;
}
#media screen and (max-height: 300px) {
footer {
display: none;
}
}
<body>
<div id="table">
<div class='navBar'>header</div>
<div class='results'>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at
venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque
ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis
lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a
venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales
leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend
sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
</div>
<footer>footer</footer>
</div>
</body>
What do you think?
Is it a solution? I got the idea from here
<div class="table">
<!-- Header -->
<div class="row header">Header</div>
<div class="row content">
<!-- Use inner div's with position relative and absolute, to fix cell height, making it overflow correctly. -->
<div class="wrapper">
<div class="inner-content">
<input type="text" />
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
<div>Some text.</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row footer">Footer</div>
html, body {
height: 100%;
max-height: 100%;
padding:0px;
margin:0px;
}
.table, .row {
outline: none;
border: none;
outline-style: none;
vertical-align: top;
text-align: left;
}
.table {
border-collapse: collapse;
display: table;
table-layout: fixed;
/* This will ensure the cells within the table will keep there width. */
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
}
.header {
background-color: red;
}
.content {
height: 100%;
}
.footer {
background-color: green;
}
.wrapper {
position:relative;
height: 100%
}
.inner-content {
overflow: auto;
position: absolute;
top: 0;
right:0;
bottom: 0;
left: 0;
}
#media screen and (max-height: 300px) {
.footer {
display: none !important;
}
}
I'm not entirely sure what you mean by "only content area being scrollable". This was my interpretation of it:
http://jsfiddle.net/5q1Lgsy6/11/
By using a position: fixed width:100% top bar you can make it so that only the content below it will be scrollable.
I ditched all display: table tags, you don't really need them to organize your content unless that content is supposed to be displayed on an actual table.
Here's the CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#table {
height: 100%;
width: 100%;
}
.navBar {
background-color: white;
top: 0;
width: 100%;
height: 72px;
border-bottom: 1px solid #bbb;
position: fixed;
}
.results {
margin-top: 72px;
background: gray;
width: 100%;
height: 100%;
overflow: auto;
}
.results > div {
height: 100%;
overflow: auto;
}
#media screen and (max-height: 300px) {
footer {
display: none;
}
}
EDIT: if you also want the footer to be permanently fixed add this to your CSS:
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
background-color: white;
}
there is a way to write css for IE
IE-6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
I'm making a website that is using ajax calls to load a content pane. Just mocking this up quick with some data, (on my website the ajax is working fine, so no need for that here) I cannot get the content pane to scroll when it overflows - the entire page scrolls instead.
There are a TON of questions similar to this but every one I've come across they have not used the overflow tag and it fixed their problem. I've tried that but had no success.
I'm not sure how to get the div to recognize that it is being overflowed. The only way so far that I've managed to get it to scroll, is fixing the height, however I feel like that's poor to do, because depending on the screen size I want it to scroll like one would expect.
Here's the html:
<body>
<div id="content-container">
<img src="http://i.imgur.com/69BtzId.png" alt="logo">
<div class="navbar">
<nav>
<ul>
<li class="homeLink"> HOME
</li>
<li id="activePortfolioLink"> PORTFOLIO
</li>
<li class="aboutLink"> ABOUT
</li>
</ul>
</nav>
</div>
<div id="portfolioUnderline"></div>
</div>
<div id="left">
<ul class="verticalNavBar">
<li id="webDesignLink"> <a>WEB DESIGN</a>
</li>
<li id="uiLink"> <a>USER INTERACTION DESIGN</a>
</li>
<li id="graphicDesignLink"> <a>GRAPHIC/ TYPOGRAPHY DESIGN</a>
</li>
</ul>
</div>
<div id="verticalLine"></div>
<div id="rightContent">
<div class="portfolioImages">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut massa in tortor ullamcorper iaculis. Ut placerat imperdiet metus sed pellentesque. Proin iaculis erat eget fringilla lobortis. Pellentesque sit amet urna condimentum, tristique erat et, egestas ante. Duis eu pulvinar leo, fringilla posuere ligula. Nunc commodo tellus at lorem interdum feugiat. Cras varius consequat diam vitae scelerisque. Mauris nec ligula in mi accumsan scelerisque sed vel augue. Aliquam elementum, dolor id ornare feugiat, ante justo sollicitudin erat, ut gravida velit nibh vel velit. Fusce ultrices consectetur eros, ac tincidunt libero auctor ut. Quisque dapibus congue arcu sed imperdiet. Pellentesque lorem nisi, dictum sit amet libero in, cursus eleifend ante. Nunc vel euismod erat. Duis massa tellus, tincidunt in fermentum ut, sagittis vulputate lectus. Nunc ut iaculis nibh. In congue laoreet arcu commodo imperdiet. Nullam rutrum augue nec mauris rhoncus facilisis. Donec bibendum luctus magna. Vivamus tempor egestas turpis. Curabitur non porta lorem, nec elementum ante. Cras faucibus consequat augue, laoreet pretium lorem tincidunt sed. Vestibulum magna dolor, pulvinar vitae facilisis eget, posuere sit amet est. Suspendisse vel elit a neque laoreet faucibus eget et quam. Integer feugiat, tellus sit amet tempus dignissim, neque justo congue enim, quis commodo neque neque quis orci. Suspendisse scelerisque erat lobortis felis fermentum, in molestie nulla pharetra. Suspendisse lacinia ac orci et tincidunt. Duis lobortis at leo a viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam libero turpis, consequat non convallis at, eleifend non dolor.</br>
</br>
</br>
</br>
</br>Maecenas tincidunt lorem vitae fringilla consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet magna tincidunt, pellentesque arcu posuere, euismod lectus. Sed nec pellentesque diam, id varius quam. Praesent mattis sapien odio, in mattis dui tempus sit amet. Morbi pulvinar odio nec augue tempus varius. Sed porttitor consequat magna, sit amet lobortis mauris congue eleifend. Donec pretium elit vitae egestas rutrum. Sed sapien libero, vulputate eu lacinia sit amet, aliquam et elit. Aenean nisi mi, vulputate id nulla ut, vestibulum porta enim. Nunc quis tellus eleifend, adipiscing lorem in, congue justo. Vivamus ornare risus quis faucibus pretium. Vestibulum eu velit placerat, lacinia justo rutrum, sagittis nisi. Donec quis tincidunt justo, eu posuere mauris. Morbi eleifend, dui eget aliquet adipiscing, tellus risus hendrerit dolor, non aliquet magna sapien malesuada ante. Fusce lobortis commodo sem id tempus. Nulla eget vehicula mi, id volutpat erat. Proin sed enim egestas, rhoncus ipsum a, consectetur mi. Quisque est arcu, tempus a ligula eu, aliquam elementum quam. Sed tristique sit amet sapien eget ornare. In vitae adipiscing neque. Ut aliquet felis vitae porttitor vehicula. Morbi aliquam rhoncus lacinia. Vestibulum at viverra nisl. Donec rhoncus, dolor eu luctus egestas, magna leo consequat justo, ac venenatis odio ligula ac tortor. Nullam faucibus ante enim, vitae cursus mauris interdum ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis massa, viverra vitae rutrum non, elementum sit amet orci.</p>
</div>
</div>
</body>
Here's the CSS:
* {
font-family:'Lato', sans-serif;
font-weight: lighter;
padding: 0;
margin: 0;
color:white;
}
body {
background: #111111;
height: 100%;
}
#content-container {
background-color: #111111;
height: 113px;
width: 100%;
}
#content-container img {
padding: 15px;
padding-top: 15px;
/*float: left; */
}
.navbar {
float: right;
background-color: #111111;
font-size: 25px;
padding-top: 45px;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 15px;
float:right;
}
nav ul li.homeLink a {
padding-left: 41px;
padding-right: 43px;
}
nav ul li.portfolioLink a {
padding-left: 9px;
padding-right: 9px;
padding-bottom: 1px;
}
nav ul li.aboutLink a {
padding-left: 37px;
padding-right: 37px;
}
#activePortfolioLink a {
padding-left: 9px;
padding-right: 9px;
background: #0033cc;
font-weight: normal;
}
#portfolioUnderline {
background-color: #0033cc;
width: 100%;
height: 10px;
margin-top: -12px;
}
#left {
float: left;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left: 300px padding-left:300px;
height:100%;
overflow:scroll;
}
.verticalNavBar {
float: right;
text-align: right;
margin-top: 20px;
color: white;
font-size: 15px;
}
.verticalNavBar li {
list-style: none;
color: white;
padding-top:10px;
padding-bottom: 10px;
}
.verticalNavBar li a {
text-decoration: none;
color: white;
padding: 10px;
}
#verticalLine {
background-color: #0033cc;
float:left;
width: 10px;
height: 905px;
}
#webDesignLink a {
background: #0033cc;
font-weight: normal;
}
.portfolioImages {
margin: 0 auto;
padding-top: 20px;
padding: 10;
margin-right: 10%;
margin-left: 10%;
margin-bottom: 20px;
overflow: auto;
}
img.individualImage {
margin-left: 450px;
}
.portfolioImages p {
font-size: 15px;
font-weight: lighter;
text-align: center;
}
Here's a jsfiddle of the code: http://jsfiddle.net/GGSSj/
Thanks for your time!
You can fix the height in relation to the screen size, but you have to fix the height /somehow/ to get it to scroll independently.
Here is a fiddle with absolute positioning of each segment: http://jsfiddle.net/GGSSj/3/
#content-container {
position:absolute; top:0; left:0; width:100%; height:113px;
}
#left {
position:absolute; top:123px; bottom:0; left:0; width:300px;
}
#rightContent {
position:absolute; top:123px; bottom:0; left:310px; right:0;
overflow-y:scroll;
}
You can fix the height in relation to the screen size, but you will have to fix the height the scrollable container (somehow with javascript for full screen height) to get it to scroll independently.
Give it a try : fiddle updated here
#rightContent {
height: 555px; /* fit height to your needs */
overflow: auto;
}
You need to set your top area and your left area to position:fixed;
http://jsfiddle.net/GGSSj/
#left {
position:fixed;
top: 113px;
left: 0;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left:300px;
padding-top:113px;
height:100%;
overflow: auto;
}
#content-container {
position: fixed;
background-color: #111111;
height: 113px;
width: 100%;
}