How do you get the text to wrap around a div if you want the div on the bottom of a container?
I can figure out how to get the text to wrap around the div as long as its on top, but if I try and push it to the bottom of the page, the text either doesn't continue across the top of the div or the div gets pushed in front of the text.
Currently, I have a container div and then the darkened box is another div within that div.
I'm trying to create this:
You just need to work with float property.
HTML:
<div>
<img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" alt="GTA V" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
CSS:
div img {
width: 240px;
float: right;
padding: 25px;
}
Play with this on jsFiddle.
Update
With pure CSS, the most that you will get is manually spacing the sides of image with absolute positioning.
The HTML:
<div class="left">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" style="width: 240px; height: 140px;">
The CSS:
img {
position: absolute;
top: 0;
left: 50%;
margin-left: -125px;
margin-top: 60px;
}
.left, .right {
width: 49%;
}
.left {
float: left;
}
.right {
float: right;
}
.left:before, .right:before {
content: "";
width: 125px;
height: 200px;
}
.left:before {
float: right;
}
.right:before {
float: left;
}
Play with this on jsFiddle.
More information
You can find more information in this topic, on StackOverflow.
position: absolute; will get rid of ghost element space
Related
.header{
width:100%;
background-color:red;
}
.navbar{
width:100%;
background-color:blue;
position: sticky;
top:0;
}
<DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="header">a</div>
<div class="navbar">b</div>
<div class="dummy text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>
How can I make both the top header and navbar position fixed? I tried this code but it only did to the second one.
You can do something like this:
.header{
width:100%;
background-color:red;
position: sticky;
top:0;
}
.navbar{
width:100%;
background-color:blue;
}
<DOCTYPE HTML>
<html>
<body>
<div class="header">
a
<div class="navbar">b</div>
</div>
<div class="dummy text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>
You can try this:
.navbar{
width:100%;
background-color:blue;
position: sticky;
top:15px;
}
.header{
width:100%;
background-color:red;
position: sticky;
top:0;
}
Hope it helps.
u can make a parent sticky and put the two nav bars inside
I am trying to create a combination of image text layout like this:
And the result should look something like this:
I am not sure how to achieve this. I tried using a grid but the grid would mean splitting the text into two elements and then parsing it however ideally I want the text to take all of the area left and the image to take the top right area and it should be responsive.
Can someone help me out here?
Here's the code that I tried:
<div className='w-4/5 FlashElementGrid h-4/5'>
<div className='border border-red-600 FlashElement_Picture'>Picture</div>
<div className='border border-red-600 FlashElement_Text_1'>Text 1</div>
<div className='border border-red-600 FlashElement_Text_2'>Text 2</div>
</div>
.FlashElementGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.FlashElement_Picture {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.FlashElement_Text_1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.FlashElement_Text_2 {
grid-column: 1 / -1;
grid-row: 2 / 3;
}
This works however I don't want three elements instead I want two elements where image goes top right and text spans into rest of the area.
You can make the image float on the right using float css property.
Margin is used to keep distance outside the image border so the text does not overlap.
.image {
float: right;
margin: 0 0 0 15px;
}
<div>
<img src="some.jpg" alt="" width="200" height="200" class="image"/>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
.aboutus {
width: 100%;
min-height: 334px;
}
.aboutus__content {
z-index: 1;
position: relative;
color: orange;
max-width: 1800px;
margin: 0 auto;
}
.aboutus__imageWrapper {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
position: relative;
}
img {
position: absolute;
height: auto;
width: 100%;
z-index: 0;
bottom: 0;
right: 0;
}
<div class='wrapper'>
<div class='aboutus'>
<div class='aboutus__content'>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class='aboutus__imageWrapper'>
<picture>
<!-- Media query images go here -->
<img src='https://www.visitmosselbay.co.za/wp-content/gallery/mossel-bay-photo-gallery/Mossel-Bay-Cape-St-Blaize-Lighthouse.jpg'>
</picture>
</div>
</div>
</div>
The idea is to make the image match the height of aboutus container. While the aboutus container height has min-height and also can be expanded but aboutus__content container.
I am a bit confused why aboutus__imageWrapper with height: 100% doesn't expand to the height of it's parent aboutus
Remove overflow:hidden from this rule:
.aboutus__imageWrapper {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
position: relative;
}
I have an article that contains a title (h4), an image that is floated left and some text.
When the title precedes the image in the HTML declaration, it is displayed above the image.
When the image precedes the title, the title is displayed to the right of the image.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
margin: 1em;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<article id="a1">
<h4>Title is above image</h4>
<img src="images/about.jpg" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
<img src="images/about.jpg" alt="about" />
<h4>Title is to the right of image</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
</body>
</html>
The HMTL above is rendered as can be seen below:
How can I use CSS to render the title to the right of the image when the title precedes the image in HTML ? I am looking for a solution where the HMTL is not changed in any way.
The natural thing would be to change the markup - here is a clumsy hack using positioning and negative margins (assuming the image width is fixed) - see demo below:
article {
clear: both; /* clear the float after each article - this is important */
}
img {
margin: 1em;
border: 1px solid black;
float: left;
}
#a1 {
padding-top: 30px; /* put some space at the top */
}
#a1 h4 {
position: absolute; /* positione the title in that space*/
left: 240px;
top: -10px;
}
#a1 img {
margin-top: -15px; /* shift the image to the top */
}
<article id="a1">
<h4>Title is above image</h4>
<img src="https://via.placeholder.com/200" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
<img src="https://via.placeholder.com/200" alt="about" />
<h4>Title is to the right of image</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<h4> has a default display of block, which takes up the whole line. Give it the style of display: inline; and it will make the image and the text in the same line as it. Since the image has float: left;, it will automatically go to the left. However, since the text is still next to the <h4>, and a couple <br>'s to make it how you wanted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
margin: 1em;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<article id="a1">
<h4 style="display: inline;">Title is above image</h4>
<img src="images/about.jpg" alt="about" /> <br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
<img src="images/about.jpg" alt="about" />
<h4>Title is to the right of image</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
</body>
</html>
I have a div, agent-list which has the classes open and closed set on it via Javascript. In Chrome and Firefox, the animation is not working - the div is immediately resized. I am 99% sure this code worked previously and I don't see anything wrong with it.
.agent-list {
position: absolute;
z-index: 20;
bottom: 0;
background-color: $lightGrey;
transition: all 1.15s;
transition-timing-function: ease-in;
&.closed {
height: 48px;
}
&.open {
height: 400px;
overflow-y: auto;
}
}
Please check the solution.
$(function(){
$('button').on('click', function(e){
e.preventDefault();
$('.agent-list').toggleClass('open');
});
});
body{
position: relative;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.agent-list {
position: absolute;
z-index: 20;
top: 50px;
background-color: #565656;
transition: height 0.3s ease-in-out 0s;
height: 48px;
left: 0;
overflow: hidden;
width: 100%;
color: #ffffff;
}
.agent-list.open {
height: 400px;
overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">Click ME</button>
<div class="agent-list">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
It is working fine in the fiddle I just made. I suppose your problem is in the JS.
Mine is
document.getElementById("MyElement").className = "agent-list closed";
https://jsfiddle.net/swmfowgp/
As it turns out, the CSS is fine, and the React code was creating a different div for .open and .close. When I fixed that to use the same div and toggle the class, it worked.