I am having an issue properly aligning a div element.
For example: at my site:
http://www.journeywithandrew.com/messel-pit-fossil-site-unesco-site/
you can see there is an intro, and then a 'key facts' box.
What I want is for that 'key facts' box to be brought up. So the last line in the box is inline with the last line of the intro text. And of course for the intro text to wrap around the 'key facts' box. So really what I want is to bottom-right align that box. Hope this makes sense..
Tried to make a negative top margin on the 'key facts' box but that doesn't displace the intro text. Just makes it overlay the text.
Any suggestions?
I think this FIDDLE will help you figure out where to put the box.
(Trial and error)
Depending on the width of the page-wrap or screen, the text position might change.
CSS
.page-wrap {
width: 600px;
}
.spacerdiv {
height: 100px;
}
.stuff {
float: right;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid black;
border-radius: 5px;
}
You have the following general format:
<div class="entry-content">
<p>Some words</p>
<div class="keyfactsunescowrapper">
<!-- This block -->
</div>
</div>
The paragraph tag, being a block level element, pushes the next content to a new line. The float respects that and does not push itself up.
However, you can put the Key facts block before the paragraph(s) and problem solved. Since it is floated right, it allows the paragraph to flow on the same line and the paragraph won't push it to a new line since the paragraph is after it.
<div class="entry-content">
<div class="keyfactsunescowrapper">
<!-- This block -->
</div>
<p>Some words</p>
</div>
Related
I'm having an issue with css trying to get the text of one div to be floated left on another div with the text displayed as in the screen shot. I cannot simply move the text because of a complex wordpress theme issue.
I've tried making the top div display:inline; and flex. Then floating the bottom div left and combinations of this for several hours, this leads to my question below.
Is it even possible to display a div like this?
Note that the "content here" text needs to be floated left on the "more text".
Here is a screenshot of how I want the layout:
Settings both divs to display: inline; should be all it takes. You don't need floats or flex-layouts. (See the snippet below).
I highly recommend studying the CSS Box Model in greater depth:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
.wrapper {
width: 150px;
}
.more-text,
.content-text {
display: inline;
}
.more-text {
background: green;
}
.content-text {
background: red;
color: #fff;
}
<div class="wrapper">
<div class="more-text">
Random text here More text
</div>
<div class="content-text">
content text Random text here
</div>
</div>
Adding < a href> to images makes the box around the image larger and forces the text on the right hand side of the image further right. I would like to make the image link to another page while keeping the current format.
I tried adding to the image (alt is connector) (shown below), but it didn't work. (https://www.w3schools.com/html/html_images.asp - Image as a Link
uses around ).
I would expect adding the to the image would simply make the image link to another page, but it changed the size of the box for the image and pushed the text to the right of the image further right.
Page: https://www.flexsweep.com/pages/aboutourproducts (shows layout as it should be - provides access to inspect if needed.)
/*Image and Advantages*/
.content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.content img {
width: 50%;
margin-right: 70px;
}
.details {
width: 50%;
}
<div id="PushBrooms" class="tabcontent">
<p>Intro text.</p>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />
<div class="details">
<p>
More text.
<div>Shop Push Brooms →</div>
</p>
</div>
</div>
<!-- Attempt to add link to image -->
<img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />
IMG tags behave special as they are a mixture of "block" (have height and width) and "inline" (float around text) elements. Here's some good information about this topic if you want to learn more about it.
Images in <a> tags have an extra bit of padding at the footer which you can get rid of by applying display:block; to the element. Also make sure that there is no extra margin or padding applied by some other rules:
a img {
padding: 0;
margin: 0;
display: block;
}
Here's a demo with some colored backgrounds to show you which element applies padding or margin.
The original image is sized at 50% width from the CSS rule on .content img. This only affects img tags that are descendants of elements with the content class. If you apply content to the link, it will work as you expect.
Edit: Noticed this will not work if you place it inside all inside another content container because the relative width is calculated from the parent, which in the second case will be the a element and not the content div. I updated the snippet to size descendant links of content to be sized at 50% width and the contained images to be 100%.
To address the small amount of padding at the bottom of the link, you can use the solution provided in Sascha's answer
/*Image and Advantages*/
.content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.content img {
width: 50%;
}
.link-wrap {
width: 50%;
}
.link-wrap img {
width: 100%;
}
.details {
width: 50%;
}
<div id="PushBrooms" class="tabcontent">
<p>Intro text.</p>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />
<div class="details">
<p>
More text. </p>
<div>Shop Push Brooms →</div>
</div>
</div>
<!-- Attempt to add link to image -->
<div class="content">
<a class="link-wrap" href="www.flexsweep.com"><img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" /></a>
<div class="details">
<p>
More text.</p>
<div>Shop Push Brooms →</div>
</div>
</div>
I have 3 divs like so:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
with the following CSS:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
}
When the divs are empty, this code works fine. All divs align along the same horizontal plane. But! When I put any content in 1 or 2 divs, the divs with the content move down about 90% of the height:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3"></div>
Divs 1 and 2 are now spaced down in comparison to the normally aligned div 3. The plot really thickens when I add content to the final div:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3">Z</div>
Now all three divs are properly aligned at page top again. Not sure what's happening here or the proper work around?
This is happening because the default vertical-align for a inline block element is baseline*.
This image from CSS Tricks helps to demonstrate the baseline of text:
As you can see, the baseline isn't how far down the text goes, it is the line that the text is aligned on. With vertical-align:baseline, the div with no content aligns with the baseline created by the <div>'s with content.
This image may help you visualize what's happening(or, you can play with the jsfiddle):
To make all your <div>'s align, no matter the content, set vertical-align:top;:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
vertical-align:top;
}
This article also helps explain vertical-align some more
* W3 Specs
I have used float: right; to float a whole paragraph to the right - I am highlighting bits of text with a background & border. My problem is that the text below then moves up and wraps to the left of the object (paragraph) that I've floated right. position: absoloute; right:0px; doesn't work as it overlaps.
So my question is, how do I float it right, but ensure the text below stays below?
CSS:
.fcsi {
background: #1E73BE;
padding:20px;
color: white;
border: 2px solid #1E73BE;
border-radius: 25px;
float: right;
}
I've just used a simple div class in HTML around the text.
<div class="fcsi">
TEXT
</div>
Any help much appreciated on this.
After this, I am looking at including an image inside the background & border, aligned top-right or bottom-right. I think I cannot do this with CSS though and need to re-enter the image with HTML each time?
Below the floated paragraph you could add:
<div style="clear:both;height:1px"></div>
Want to know the reason for this behavior.
CSS
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Empty div
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
behavior: element increases from bottom to top (height)
div with text
<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>
behavior: element increases from top to bottom (height)
see it in action: http://jsfiddle.net/8GGYm/
Basically it got to do with the way that vertical-align: is calculated. So if you put vertical-aling:bottom; attribute in the css then you will notice it will be the same with and without text.
you can read the this for more details.
When the div has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be). so there is a little difference in calculating with and without text.
Hope this is helpfull.
please see here: http://jsfiddle.net/dd24z/. By default text is vertical-align: top, but you can change that behavior:
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
vertical-align: bottom;
}
http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height
'vertical-align': baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Add
vertical-align: bottom;
to your CSS. Hope it works as you want.
I guess this can be explained by the text alignment, independently from divs.
Text, when placed in a div, is vertically aligned to top-left by default. Those divs without text align beside each other (inline-block) expanding the page downwards. If you add another div, you'll see the second header going further down.
<h1>Empty div</h1>
Some text
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
continuing here
<h2>Div with text</h2>
Some text
<div style="height:20px;">20</div>
<div style="height:40px;">40</div>
<div style="height:60px;">60</div>
<div style="height:80px;">80</div>
continuing here
...
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Fiddle
In the above fiddle, you can see that the text line is the "guideline".
Maybe this is the explanation: once the divs have text in them, they will align it with the surrounding text and, if inexistent, then they align their bottom line.
I'm sorry, maybe not very clear but I hope you understand my view.