I'm struggling to align to right 2 'h' elements (i.e. h1 and h3) inside right Bootstrap column.
<div class="col-xs-6">photo</div>
<div class="col-xs-6 text-right">
<h1>Header</h1>
<h3 style="width:100px;">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</h3>
</div>
The issue is that h3 with fixed width isn't aligned to right while h1 snippet is. See screen
Here is fiddle
After debugging I came to find out that the issue was due to h1 width property. But I need it to keep the text folding. It can be solved by manually setting left margin but I am sure there is a more elegant solution.
Why is the width property keeps text from aligning and what are the solution?
Try to use following block.
CSS:
h1, h3{
display: inline-block;
padding-right: 20px;
}
Related
I'm trying to add an image within a line of text but the white space that is automatically added under the image is throwing off the alignment. The other answers to this question only seem to apply to images when they are not part of a line of text, so are not helpful.
The common answers seem to be
display: block, which doesn't work for my use because it adds a line break or vertical-align, which doesn't work for my use because it pushes down the next line of text.
Screenshots from wordpress:
Does anyone know another solution or workaround?
<style>img {
vertical-align: text-top;
margin-top: 3px
}
</style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam (<img src="http://www.redacted.org/wp-content/uploads/2022/05/info-gray.png" alt="" />) quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
you might be able to put a height on your image to prevent it from pushing the text down. also add width: auto to prevent stretching or squishing of your image.
<style>
img {
vertical-align: text-top;
margin-top: 3px;
height: <the size of the text here>;
width: auto;
}
</style>
.I want the breakpoint at 800px to place all three review divs side by side with 20px of padding around them but for whatever reason, it's not working. Can someone tell me where I went wrong? Currently, Reviewer 1 and 2 are stacked on top of each other to the left side of the container, while Review 3 is all by it's lonesome on the right. How do I change this?
Code snippet below:
HTML:
<div class="wrapper">
<div class="card-1">
<h3>Reviewer 1</h3>
<p class="border">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
<div class="card-2">
<h3>Reviewer 2</h3>
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
</div>
<div class="card-3">
<h3>Reviewer 3</h3>
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
</div>
CSS:
.cards {
display: flex;
flex-direction: column;
align-items: center;
}
#media screen and (min-width: 800px) {
.cards {
display: flex;
flex-direction: row;
padding: 10px;
border: 1px black solid;
}
.border {
width: 75%;
padding: 10px;
margin: auto;
}
}
So I figured it out ironically enough. I just changed the .wrapper div as follows:
.wrapper {
display: flex;
flex-direction: row;
}
I have 3 divs inside a div. When I float them left, they line up side by side. I want to position them for example 500px from top using nth-child in CSS, but then they position themselves on top of each-other. How can solve this problem?
.wrapper{
content:"";
display:block;
clear:both;
}
.sevice p{
margin: 10px 0;
text-align: center;
}
.service{
float: left;
background-color: rgba(255,255,255,0.7);
width: 26%;
margin: 1%;
padding: 1%;
height: 200px;
position: absolute;
}
.service:nth-child(1){
top: 500px;
}
.service:nth-child(2){
top: 500px;
}
.service:nth-child(3){
top: 500px;
}
<div class="wrapper">
<div class="service">
<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
</p>
</div>
<div class="service">
<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
</p>
</div>
<div class="service">
<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
</p>
</div>
</div>
I think I understand what you are saying. You would like them to be positioned side by side, each with the same top value. Floating will position them side by side automatically (if there is room), but if you want to do that with absolute positioning, you need to set both the top and the left values of each element. If you don't set the left value, your elements will all be set all the way to the left. I've revised the snippet below to give an example (and clean up a couple of things).
The general rule is that when you use absolute positioning, you have to specify the x,y coordinates of one of the corners of the element, relative to the analogous corner of its container. To do that, you can use either top or bottom, along with either right or left. So, top and left will position the top left corner of your element relative to the top left corner of the container, bottom and left will do the same with the two bottom left corners, and so on.
If you don't specify, then the values will all be zero, and your element will be in the top left corner of your container. In your case, you didn't specify left or right, so all three elements were positioned at left: 0. In other words, they were all on top of each other as you observed.
/* Don't need any of this
.wrapper{
content:"";
display:block;
clear:both;
}
*/
.service p { /* You had ".sevice p," which is why you didn't get centering */
/* margin: 10px 0;
Don't really need margin with absolute positioning, just change top/left
values to make adjustments to position */
text-align: center;
}
.service {
/* float: left; don't need this any more */
top: 500px; /* put this here if it's the same for all of them */
background-color: rgba(255, 255, 255, 0.7);
width: 26%;
margin: 1%;
padding: 1%;
height: 200px;
position: absolute;
}
.service:nth-child(1) {
left: 0px;
/* here */
}
.service:nth-child(2) {
left: 27%;
/* here */
}
.service:nth-child(3) {
left: 54%;
/* and here */
}
<div class="wrapper">
<div class="service">
<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
</p>
</div>
<div class="service">
<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
</p>
</div>
<div class="service">
<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
</p>
</div>
</div>
Can someone explain it for me in simple words please?
A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.
Note: this means that floats with zero outer height or negative outer
height do not shorten line boxes.
Whats the meaning of the first paragraph?
What is the outer height? Is it margin?
It is from: CSS spec 2.1 > visual formatting model > section 9.5 Floats
What's the meaning of the first paragraph?
It's really just a precise definition of when a line of text is considered as being "next" to a float, basically when there is vertical overlap between them. When a line of text is considered to be next to a float, the line of text is shortened to avoid the float.
What is the outer height? Is it margin?
Yes, it's the distance from the upper edge of the top margin to the lower edge of the bottom margin. The important thing to remember in this context is that margins can be negative. So the lower edge of the bottom margin can be above the upper edge of the top margin, in which case the height is negative.
See below or http://jsfiddle.net/n0fobpqr/2/ for examples of how adjusting the bottom margin (and hence the outer height) affects the width of the lines of text.
body { font-size:20px; width: 300px; }
figure { float:left; }
img { padding-right: 10px; }
.one figure { margin:0; }
.two figure { margin:0 0 -60px 0; }
.three figure { margin:0 0 -110px 0; }
<div class="case one">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<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. </p>
</div>
<hr/>
<div class="case two">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<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. </p>
</div>
<hr/>
<div class="case three">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<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. </p>
</div>
It means floats collapse to the next visible line. You can think of "lines" as boxes that may span across the entire width of the browser window. Floats have no impact on the height of these lines. The outer height is the entire height of the float which includes margins and borders.
I know it's easy enough to wrap text around images by floating the image right or left & then putting your text after it, but what I am wanting to do is wrap other elements around it as well, such as div's.
I tried to set my div to inline & this worked fine, however once I added other divs inside that div it still looked fine, but when looking at it in Firebug the little blue line that shows the element you are hovering over in the code extended over the image as well & when I attempted to add padding to the container div it didn't work & you could see that was because the padding was added right at the end.
I ended up getting it to look ok but adding padding to the image, however it still doesn't seem the right way to go about it seeing as Firebug doesn't like it & I am worried about compatibility issues.
Here is an image of what I am trying to do.. the gray area is where I want the text/elements to wrap & the brown is the image.
Here is some example code: (This example is the not wrapping version)
<div class="main">
<img src="../images/work/example.png" width="275" height="233" class="screenshot" alt="Example" />
<div class="details">
<div class="about">
<div class="title">
About:
</div>
<div class="info">
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.
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.
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.
</div>
<!-- Info Ends -->
</div>
<!-- About Ends -->
</div>
<!-- Details Ends -->
<div class="contentClear"></div>
</div>
<!-- Main Ends -->
Example CSS:
#content .wrapper .left .main {
padding-top: 20px;
width: 550px;
}
#content .wrapper .left .main .screenshot {
float: right;
border: 1px solid #c0c0c0;
width: 275px;
}
#content .wrapper .left .main .details {
width: 263px;
padding-right: 10px;
}
#content .wrapper .left .main .details .title {
color: #0F5688;
font-size: 1.8em;
font-family: arial;
font-weight: bold;
}
#content .wrapper .left .main .details .info {
margin-top: 6px;
font-size: 1.3em;
font-family: Arial;
color: #636363;
line-height: 1.6;
}
Here is an image showing the issue FireBug has with it (from the JSFiddle example), as I say it looks fine on the browser, but seeing as the firebug bar extends all the way over the image I was worried that may cause problems..
Yes, the correct way to move something to one side and have stuff wrap around it is to float the element.
In the example below (simplified from your code), adding padding to the floated image works just fine.
CSS:
.main .screenshot {
float: right;
border: 1px solid #c0c0c0;
padding: 5px;
}
.main .title{
font-size: 140%;
}
HTML:
<div class="main">
<img src="img/png" width="150" height="117" class="screenshot" alt="Example" />
<div class="details">
<div class="about">
<div class="title">About:</div>
<div class="info">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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
Demo jsFiddle