I have a div which floats left. Inside the div, I have an image. Following the diff is a paragraph.
I expect the paragraph to wrap around the image but I am seeing plenty of white space.
.class-0-568 {
float: left;
}
.class-0-569 {
padding-right: 2%;
width: 33%;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
<div class="class-0-568" id="id-0-553">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>
Here is the output of above
Output
If I set the float property to img, then it is working as expected.
Correct Output
I dont understand why. Can someone please help me?
PS: JSFiddle link if anyone wants to play:
https://jsfiddle.net/chid1989/say7pzqe/#&togetherjs=z8iIlaQmNz
EDIT
I tried inspecting the elements through chrome. Apparently, the div is occupying the extra space. But I dont know why.
Inspection
Your images width (caused by its class .class-0-569) is 33%. But that's of its container / parent element, i.e. the floated .class-0-568 element.
Apply the 33% width to the image's parent (.class-0-568) and 100% width to the image itself:
.class-0-568 {
float: left;
width: 33%;
}
.class-0-569 {
padding-right: 2%;
width: 100%;
height: auto;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
<div class="class-0-568" id="id-0-553">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>
Addition after comments: The - actually much simpler - alternative is to float the image itself without using a wrapper div:
#id-0-554 {
float: left;
width: 33%;
margin-right: 2%;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>
<div> and <p> are both block level elements. The correct way to float images in text is to place the <img> directly inside the <p>:
<html>
<head>
<style>
.class-0-569 {
padding-right: 2%;
width: 33%;
float: left;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
</style>
</head>
<body>
<p class="class-0-570" id="id-0-555">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">These offer a description of who you are
</p>
</body>
</html>
Fiddle
Related
https://www.opheliajewellery.co.uk/about/
On this page there's a margin on the bottom and right of each div in the middle, The top and middle have the right size between eachother but the bottom and middle has a slightly larger gap,
After using the inspector I can't seem to find the cause, It's not actually a margin, it's just white space.
It works find on my localhost, but as soon as I put the code into wordpress it does this.
Here's some of the css and the html.
.ophelia-shortDiv{
width: 37%;
margin-bottom: 1%;
display: inline-block;
}
.ophelia-aboutText{
margin-top: 15%;
margin-bottom: 15%;
margin-left: 10%;
margin-right: 10%;
}
.ophelia-wideDiv{
width: 62%;
margin-bottom: 1%;
min-height: 345px;
display: inline-block;
}
.cover{
background-size: cover;
}
.ophelia-leftDiv{
float: left;
margin-right: 1%;
}
.ophelia-color1{
background-color: #e7e7e7;
}
.ophelia-color2{
background-color: #c5c6cd;
}
.ophelia-color3{
background-color: #ced6d8;
}
.ophelia-aboutMain{
margin-bottom: 5%;
margin-top: 5%;
}
<div class="ophelia-aboutMain">
<div class="ophelia-wideDiv ophelia-leftDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageOne.jpg) no-repeat; background-size:cover"></div>
<div class="ophelia-shortDiv ophelia-color1">
<div class="ophelia-aboutText">
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="ophelia-wideDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageOne.jpg) no-repeat; background-size:cover"></div>
<div class="ophelia-shortDiv ophelia-color1 ophelia-leftDiv">
<div class="ophelia-aboutText">
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="ophelia-wideDiv ophelia-leftDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageThree.jpg) no-repeat; background-size:cover"></div>
<div class="ophelia-shortDiv ophelia-color3">
<div class="ophelia-aboutText">
<p>
...
</p>
<p>
...
</p>
</div>
</div>
</div>
Changing 'inline-block' to 'inline-flex' on the divs fixed the problem.
There is a fiddle below to show an example of the problem
Your gap between your elements is caused by this css rule you have:
.kleanity-body, .kleanity-body p, .kleanity-line-height, .gdlr-core-line-height {
line-height: 1.7;
}
Your are applying line-height to many different elements including the body of your html.
remove this rule and apply the line-height only where you need it.
I put this into a fiddle, and indeed the margin issue is there. This has nothing to do with any styles applied to body, since it appears without any other context (though changes there might well have the desired effect).
I am not sure what is causing this, but it seems that if the image above is removed, the issue disappears, and also if the middle image has float:right - so I suspect this is something to do with the float:left in your ophelia-leftDiv class.
I am having trouble and need assistance. Essentially, I want a center image div and four divs around the center image with text. Also, when I collapse the page width, I want them to all float centered below one another. Imagine a smartphone image in the middle of the screen and four text blocks (two top and two bottom). Additionally (to complicate things, ha) I want the left top and bottom text blocks to have right aligned text and the right top and bottom text blocks to have left aligned text. When the page collapses, I want all text to be centered. Thank you very much for any assistance!
The problem I have with my existing code: I cannot move the text blocks exactly where I want. I don't want them specifically at the top and bottom. Also, I am having trouble with aligning the text properly.
This is what I have so far:
#solutions2Header {
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
font-size: 40px;
font-weight: lighter;
letter-spacing: 2px;
}
.solutionSection2:after { /*clear float*/
content: "";
display: table;
clear: both;
margin: 0 auto;
}
.solutionSection2 > div {
float: left;
width: 33%;
box-sizing: border-box;
text-align: center;
background-color: red;
}
#media (max-width: 850px) { /*breakpoint*/
.solutionSection2 > div {
float: none;
margin-left: auto;
margin-right: auto;
width: 100%;
background-color: #FAFAFA;
text-align: center;
}
}
.solutions2 {
background-color: green;
height: 100%;
padding-bottom: 500px;
}
#iphonexCenter {
position: relative;
margin: 0 auto;
}
#bottomBox {
padding-bottom: 100px;
}
<div class="solutions2">
<h2 id="solutions2Header">Highlighted Features</h2>
<div class="solutionSection2">
<div>
<p>Charges stored in one <br>place.</p>
<p><br>Provides peace of mind by<br>syncing and storing your charges<br>automatically.</p>
</div>
<div>
<img src="http://via.placeholder.com/300x600" id="iphonexCenter" alt="iPhone X Image" height="600" width="300" style="margin: 0 auto">
</div>
<div>
<p>Individual and team<br>messaging.</p>
<p><br>100% HIPAA compliant text<br>messaging at the tip of your fingers.</p>
</div>
</div>
<div class="solutionSection2">
<div id="bottomBox">
<p>Track daily work<br>progress.</p>
<p><br>Intellegently helps locate<br>missing charges and provides a score<br>card to ensure all charges are entered.</p>
</div>
<div>
<p></p>
</div>
<div id="bottomBox">
<p>Care coordination<br>alerts.</p>
<p><br>Be in the know. We can alert <br>your providers via admit/discharge
<br> notifications, stat, routine consults,<br> and more.</p>
</div>
</div>
</div>
If you don't need support for old browser I would go with flex box. It's quite easy. You can find complete guide to it here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Like when adding a text and a picture floating to the left.
Normally, when the text changes its digits, the picture will move its position to the left or right depending on the amount of digits.
Here is an example of what I mean:
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123</p>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123</p>
</div>
<style>
img{
display:inline-block;
height:30px;
}
p{
display:inline;
}
</style>
My question is: How to make the images' position static so that no matter the digits of the text beside it?
You can give your text a width:
p{
display:inline-block;
width: 50px;
}
Changed your markup a bit and added some CSS. Let me know if this is what you were looking for.
html
<div>
<div class="image-container">
<img class="left-floated-image" src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>1232323232323323</p>
</div>
<div class="image-container">
<img class="left-floated-image" src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>1232323232323323</p>
</div>
</div>
css
.image-container {
display: inline-block;
}
img.left-floated-image {
float: left;
height: 30px;
}
p {
display: inline-block;
width: 30px;
word-wrap: break-word;
}
What you can do is wrap each of the image-paragraph pairs in their own div and float those divs next to each other. Give those divs a specific width.
Then, you can float the images to the left, and that will make the paragraphs wrap around them when they hit the boundary of their parent div, like so:
div {
float: left;
width: 65px;
}
img {
float: left;
width: 30px;
height: 30px;
}
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123 456 789 101112</p>
</div>
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123</p>
</div>
Note that if you float the image and paragraphs left, the paragraphs will only float next to the images if their container div is wide enough to fit them both (which in this example below it is not, thus the first paragraph wraps below the first image).
div {
float: left;
width: 65px;
}
img {
float: left;
width: 30px;
height: 30px;
}
p {
float: left;
}
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123 456 789 101112</p>
</div>
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123</p>
</div>
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/