I want to align an image beside a text. But for some reason, all I trye makes the text either wrap around the image or be placed below it. This is my current code:
.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;
img {
height: 16px;
margin-right: 20px;
}
div {
display: inline-block;
height: 100%;
}
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div><img src="/src/to/img.jpg"></div>
<div>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.</div>
</div>
</div>
</div>
At the moment, the text is place below the image. I have also tried
div tag gets float:left - places text below image
replacing div with span - wraps text around image
replacing div with span and adding display:inline-block; to spans - places text below image
removing div tag around image and text - wraps text around image
float:left; on only div with image - wraps text around image
float:left; on div with image and float:right; on div with text - places text below image
adding display: inline-block; to img tag - places text below image
Note that the container, box and row classes comes from Bootstrap. Can that affect it somehow?
Searching has not found me a solution other than the ones I've tried before, but I might have overlooked some solution posted here before.
You could use display: table-cell on divs inside cc-testimonial-quote DEMO
.cc-testimonial-quote > div {
display: table-cell;
}
If you are using bootstrap why don't you let it set the layout for you without additional css?
<div class="container box">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="/src/to/img.jpg">
</div>
<div class="col-sm-8">
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.
</div>
</div>
</div>
Here is your updated code : https://jsfiddle.net/06c3av7r/1/
You have to make some changes in DIV elements.
.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;
img {
height: 16px;
margin-right: 20px;
}
div {
display: inline-block;
height: 100%;
}
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div><img src="/src/to/img.jpg">
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.</div>
</div>
</div>
</div>
Try the solution below. I assigned display: flex to the container and removed some stuff.
.cc-testimonial-quote {
display: flex;
font-style: italic;
font-weight: 600;
max-width: 700px;
}
img {
height: 16px;
margin-right: 20px;
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div>
<img src="/src/to/img.jpg" />
</div>
<div>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.</div>
</div>
</div>
</div>
You want to do this effect:
.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;
}
.cc-testimonial-quote > img {
float: left;
height: 26px;
margin: 0 10px 10px 0;
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<img src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
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.
</div>
</div>
</div>
Or this effect:
.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;
}
.cc-testimonial-quote > .image-wrapper {
float: left;
}
.cc-testimonial-quote > .image-wrapper > img {
height: 26px;
margin: 0 10px 10px 0;
}
.cc-testimonial-quote > .text-wrapper {
overflow: auto;
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div class="image-wrapper">
<img src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
</div>
<div class="text-wrapper">
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.
<div>
</div>
</div>
</div>
Choose one in a comment and I'll explain it in detail!
Related
The problem is I have to make div with aside class scrollable, but the right side with picture not.
For now it is not scrollable because position is not fixed (screenshot):
but if I add position:fixed; to aside class - it will be scrollable, but the right side will move left, which is bad.
body {
background-color: #2e7744;
overflow:hidden;
}
.aside {
height: 100%;
overflow-y: auto;
position:fixed;
}
<body>
<div class="container-fluid">
<div class="row">
<div class="aside col-lg-3">
<nav class="menu background sidebar card mb-4">
<ul class="nav flex-column">
<li class="nav-item">
<span class="nav-link" style="background-color: #71a4ff66">
<b class="header">Cat 1</b>
</span>
<ul class="background">
<li class="nav-item hover">
<a class="poster-link " href="/poster/index.php?pid=3">
<div>Pic 1</div>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<span class="nav-link">
<b class="header">Cat 2</b>
</span>
<ul class="background">
<li class="nav-item hover">
<a class="poster-link " href="/poster/index.php?pid=1">
<div>Text 1</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="col-sm-12 col-lg-12 col-xl-4 mt-4">
<div class="row">
<div class="col-sm-12">
Picture with text
</div>
</div>
</div>
</div>
</div>
</body>
Is there an option to solve this problem quick?
This HTML structure works perfectly on mobile, I have to preserver it somehow.
Any ideas?
What you need to do is encapsulate the menu pane in a div and then assign position fixed in menu pane class with respect to its parent div.
Below is the code to prove the same:
* {
margin: 0px;
padding: 0px;
font-family: 'arial';
}
.container-fluid {
width: 100%;
display: grid;
grid-template-columns: 30% 70%;
}
.left_pane {
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.menu_pane {
top: 0;
left: 0;
position: fixed;
display: flex;
flex-direction: column;
overflow-y: scroll;
height: 100vh;
width: 30%;
}
.menu_pane a {
padding: 25px 20px;
background: black;
color: white;
border: 1px solid black;
text-align: center;
font-size: 50px;
text-decoration: none;
transition: 0.4s;
}
.menu_pane a:hover {
background: white;
color: black;
}
.right_pane {
display: flex;
flex-direction: column;
padding: 20px;
}
.content_pane {
padding: 20px 10px;
display: flex;
flex-direction: column;
}
.content_pane h1 {
font-size: 50px;
text-transform: uppercase;
padding-bottom: 20px;
}
.content_pane p {
font-size: 20px;
width: 70%;
}
<div class="container-fluid">
<div class="left_pane">
<div class="menu_pane">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
Button 7
Button 8
Button 9
Button 10
Button 11
Button 12
</div>
</div>
<div class="right_pane">
<div class="content_pane">
<h1>Heading</h1>
<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="content_pane">
<h1>Heading</h1>
<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="content_pane">
<h1>Heading</h1>
<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="content_pane">
<h1>Heading</h1>
<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="content_pane">
<h1>Heading</h1>
<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="content_pane">
<h1>Heading</h1>
<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>
Currently I have this:
When I resize this container, the text is out of my box.
How my card is made:
<div class="container selfsizing nobackground">
<div class="row selfsizing">
<div class="col-sm nopadding">
<div class="d-flex justify-content-between">
<span style="font-weight: bold;">{{dashboard_card['card_title']}}</span>
<form method="post">
<button name="deleteCard" class="delete" type="submit" value="{{dashboard_card['id']}}">x</button>
</form>
</div>
<div class="d-flex justify-content-between card-text">
<span style="font-weight: bold;">{{dashboard_card['card_text']}}</span>
</div>
</div>
</div>
</div>
How can I hide the text, when I resize the div vertically?
You can use overflow:hidden; css property on the container.
.container{
overflow:hidden;
}
example
.container {
width: 300px;
background: orange;
padding: 10px;
margin: 20px auto;
}
.container.overflow-h {
width: 300px;
height: 50px;
background: orange;
overflow: hidden;
padding: 10px;
margin: 20px auto;
}
<div class="container overflow-h">
<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>
</div>
<div class="container">
<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>
</div>
Hope this helps!
I have three paragraphs with heading and each heading have a border-bottom which is on the left side.
I used h2:after{//CSS here } to display the border. I used left: 13.5%; for the first heading to display the border on the left side.I can use the left:25% for second and left:39% for the last heading to display the border but I know this is not a good way to display. Because If I used to like this then I have to use the media query for all the device to set the border.
I want to know which is the best way to use the border-bottom and all are display on the left side.
Getting the output
I need a output
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
}
.heading h2:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 13.5%;
transform: translateX(-13.5%);
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<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="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<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="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<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>
Simply apply it to the span instead of the h2 and no need to specify a specific value to left, simply make it 0 and also bottom to 0 (or any negative value if you want it to be lower)
[don't forget position:relative on span]
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position:relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
bottom:0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<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="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<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="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<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>
You should put your pseudo element :after in your span because it covers the exact width of your heading text. Then you should give your span a relative positioning so it will become its parent. Then just give it a 0% left positioning so it will align with the left. Your code should look like this.
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position: relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<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="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<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="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<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>
I created a parent div with fixed size which contains 2 children, but I want that only the second one will have overflow: auto;
Unfortunately, it doesn't work as expected...
Here is my snippet:
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"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."
</div>
</div>
Any ideas?
You can use max-height CSS a property. With the help of max-height, You can set the maximum height. If the content is exceeding the maximum height, Y scroll will be automatically implemented.
Code
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
overflow: auto;
max-height:100px
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"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."
</div>
</div>
You should set a max-value before the overflow kicks in...
EDIT: Set max-height to % so that it will always be within you changing needs. I kept it as 80% here since it fits in within the second-child nicely
.second-child
{
max-height: 80%;
overflow: auto;
}
Now it should be good!
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
max-height: 80%;
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"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."
</div>
</div>
Updated:
Define a max-height to tell the browser after what length the overflow would take place
Update 2:
Make the container a table
Make the other 2 div's table-rows
In 2nd div, put the text in a position relative following position absolute
.parent {
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
display: table;
}
.first-child,
.second-child {
display: table-row;
}
.second-child {
height: 100%;
}
.second-child-content-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.second-child-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
<div class="second-child-content-wrapper">
<div class="second-child-content">
"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."
</div>
</div>
</div>
</div>
I have a page layout which employs floating boxes with constant width and variable height, inside a variable-width container (which I'm going to make constant for the sake of this question). This is my page's code:
CSS:
#main {
width: 640px;
margin: 0 auto;
min-height: 100%;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
}
HTML:
<body>
<div id="main">
<div class="profile">1: I'm tall. 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.</div>
<div class="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
When I apply this code, div 4 seems like it's "stuck" in the corner, instead of to the left of div 3 like it should be: (Codepen preview).
What am I doing wrong, and how should I fix this glitch?
You could clear the odd divs:
.profile:nth-child(odd) {
clear:left;
}
Updated Codepen
#main {
width: 640px;
margin: 0 auto;
background: #444;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
background: silver;
}
.profile:nth-child(odd) {
clear: left;
}
<body>
<div id="main">
<div class="profile">1: 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.</div>
<div class="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>