With "bootstrap": "^4.3.1"
I try to make image aligned left and content which floats image from the right and would be visible below of the image ( without empty space under image ).
I works ok to in class single_forum_image_left_aligned to leave float: left; property:
.single_forum_image_left_aligned_wrapper {
border: 3px dotted red;
align-items:start;
}
.single_forum_image_left_aligned {
display: flex;
justify-self: flex-start;
justify-content: flex-start;
/*float: left;*/
padding: 2px;
margin: 5px;
max-width: 460px;
max-height: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="single_forum_image_left_aligned_wrapper">
<a class="a_link" >
<img class="single_forum_image_left_aligned" src="imagepath/general-business.jpeg?dt=1606807690"
alt="Mount Everest is found in which mountain range?">
</a>
<p class="card-text " style="align-items:start">
Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <strong>nostrud exercitation</strong> 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>
But that does not seems good decision for me.
Are there some better solution ?
You don't need to write single line of code of this type of view in Bootstrap-v4+
In Bootstrap-v4 there is predefined class .float-left for float: left; property.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container py-3">
<div class="row">
<div class="col-sm-12">
<div class="d-block clearfix bg-light p-3 shadow">
<a class="float-left mr-3">
<img src="https://placeimg.com/150/150/animals" class="rounded">
</a>
<p>
Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <strong>nostrud exercitation</strong> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
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 a standard Bootstrap grid and an image inside a .col which height should be equal to the height of the text block to the right:
.img-fluid-height {
max-height: 100%;
width: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<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>
</div>
I expected the image to be the height of the .col container which height is equal to the height of the text block to the right. However, it doesn't work like this.
Remove the image from the flow using position:absolute and your text will define the height then you can use height:100% on the image:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img class="mh-100 mw-100 position-absolute" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<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>
</div>
I was assuming something else. You can do something like this with background-size.
.background-image {
height: 100%;
background-image: url("https://placehold.it/1920x1280");
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<div class="background-image"></div>
</div>
<div class="col-8">
<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>
</div>
added width:100% Hope this helps. thanks
.img-fluid-height {
max-height: 100%;
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<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>
</div>
Can someone help me understand why Chrome but not Firefox is able to display the background image of the tree on the right side and how to fix: www.eye45.com
When the web browser is contracted, both
<div class="col-sm-6 left-side">
<div class="col-sm-6 right-side">
are supposed to maintain the same height until
#media (max-width: 780px) {} and then the tree image is supposed to flip under the purple paragraphs and reduce to a height of 200px.
It works perfect in Chrome, but not Firefox.
Adding style with display as table will fix this for firefox.
.right-side {
display: table;
}
Add style="display:table"
<div class="col-sm-6 right-side" style="display: table;">
</div>
Try using equal height columns bootstrap css in your code.
Reference : http://getbootstrap.com.vn/examples/equal-height-columns/
.left-side {
background: #bbb4e5 none repeat scroll 0 0;
color: #fff;
display: table-cell;
padding: 2%;
}
.right-side {
background: url("https://s3.amazonaws.com/igd-wp-uploads/2014/05/Perfei%C3%A7%C3%A3o-Igni%C3%A7%C3%A3o-Digital.jpg") no-repeat 50% center / cover ;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-eq-height">
<div class="col-sm-6 left-side">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div class="col-sm-6 right-side">
</div>
</div>
Here is demo : http://codepen.io/anon/pen/jrJBzz
it's a height problem in chrome browser. use this
.right-side {
min-height: 500px;
}
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!