I have 2 divs that contain an image and some text. When I try floating the image to the left using float:left; the other elements have weird formatings . Below is my code and an image of what happens:
HTML
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="muscle"src="images/strong.png" alt="muscle">
<h3>Physical Capabilities</h3>
<p>I am physically fit, tall and lean from years of playing outside.</p>
</div>
<div class="skill-row">
<img class="brain" src="images/brainstorm.png" alt="brain">
<h3>Intelligence</h3>
<p>I am able to perform mathematical calculations with ease, and understand advanced concepts.</p>
</div>
</div>
CSS
.skill-row{
width: 50%;
margin: 100px auto 100px auto;
text-align: left; line-height: 2;
}
.muscle {
width: 25%;
float: left;
}
.brain {
width: 25%;
float: left;
}
Image of Site
What can I do to float the image to the left while keeping the rest of my webpage in tact?
Float affects other inline elements. You can clear the float on the other elements, in this case:
h3 {
clear: left;
}
More about css 'clear'
https://www.w3schools.com/cssref/pr_class_clear.asp
.skill-row{
width: 50%;
margin: 100px auto 100px auto;
text-align: left; line-height: 2;
}
.muscle {
width: 25%;
float: left;
}
.brain {
width: 25%;
float: left;
}
h3 {
clear: left;
}
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="muscle"src="images/strong.png" alt="muscle">
<h3>Physical Capabilities</h3>
<p>I am physically fit, tall and lean from years of playing outside.</p>
</div>
<div class="skill-row">
<img class="brain" src="images/brainstorm.png" alt="brain">
<h3>Intelligence</h3>
<p>I am able to perform mathematical calculations with ease, and understand advanced concepts.</p>
</div>
</div>
Related
What ends up happening is that the two columns cannot cohabitate next to each other without shrinking the width by about 2%. Doing that causes the edges to not align with the header and it just looks off. Is there something I am missing about 'width' or 'padding'?
This is what I am trying to emulate: https://www.w3schools.com/howto/howto_css_blog_layout.asp
This is what ends up happening (before changing the width by -2%):
What happens when I have to change the width:
body {
padding: 20px;
background: #f1f1f1;
}
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
#media(max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<div class="header">
<h2>Harry's Den</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>I love the World</h2>
<h5>Helloo!</h5>
<p>Text!</p>
</div>
<div class="card">
<h2>Wow this works so far!</h2>
<h5>I am just happy to have a semi-functional blog!</h5>
<p>Yay! I do not have much to say other than I am happy to have made it this far. Hopefully this will help!</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me!</h2>
<p>University: Texas Tech University</p>
<p>Major: Computer Engineering (BS)</p>
<p>Minor: Mathematics</p>
<p>Interests: Energy Infrastructure and Space Exploration Efforts</p>
</div>
<div class="card">
<h3>Popular Post</h3>
</div>
<div class="card">
<h3>Follow Me!</h3>
Twitter
<br/>
Facebook
</div>
</div>
</div>
<div class="footer">
<h2>Developed by Barry Allen</h2>
<h2>Quantum Enterprise Projects</h2>
</div>
Here is the information from the MDN Web Doc.
By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height you have to adjust the value
you give to allow for any border or padding that may be added.
The box-sizing property can be used to adjust this behavior:
content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content
box will be 100 pixels wide, and the width of any border or padding
will be added to the final rendered width.
border-box tells the browser to account for any border and padding in the values you specify for width and height. If you
set an element's width to 100 pixels, that 100 pixels will
include any border or padding you added, and the content box
will shrink to absorb that extra width. This typically makes it
much easier to size elements.
You have to use box-sizing:border-box to include border, padding and margin everything included in the width of your element.
Read more information in MDN Web Docs
* {
box-sizing:border-box;
}
* {
box-sizing:border-box;
}
body{
padding: 20px;
background: #f1f1f1;
}
.header{
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
.leftcolumn{
float: left;
width: 75%;
}
.rightcolumn{
float: left;
width: 25%;
padding-left: 20px;
}
.card{
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after{
content: "";
display: table;
clear: both;
}
.footer{
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
#media(max-width: 800px){
.leftcolumn, .rightcolumn{
width: 100%;
padding: 0;
}
}
<div class="header">
<h2>Harry's Den</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>I love the World</h2>
<h5>Helloo!</h5>
<p>Text!</p>
</div>
<div class="card">
<h2>Wow this works so far!</h2>
<h5>I am just happy to have a semi-functional blog!</h5>
<p>Yay! I do not have much to say other than I am happy to have made it this far. Hopefully this will help!</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me!</h2>
<p>University: Texas Tech University</p>
<p>Major: Computer Engineering (BS)</p>
<p>Minor: Mathematics</p>
<p>Interests: Energy Infrastructure and Space Exploration Efforts</p>
</div>
<div class="card">
<h3>Popular Post</h3>
</div>
<div class="card">
<h3>Follow Me!</h3>
Twitter
<br/>
Facebook
</div>
</div>
</div>
<div class="footer">
<h2>Developed by Barry Allen</h2>
<h2>Quantum Enterprise Projects</h2>
</div>
Here is the Fiddle Link. You can expand and shrunk the size of the screen and check it out how it is reacting.
Padding and border are counted in the width. So you have to subtract them.
In your case you can do
.rightcolumn {
width: calc(25% - 20px);
}
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>
I have in div two divs with floats (left and right). In right div there are paragraphs. All that two divs have inline-block display. If paragraphs in right div too long, then right div jump over the left, and set to display block.
I'm want to paraghraps do new line if it too long.
Code:
.left {
margin: 30px;
float: left;
display: inline-block;
}
.right {
float: left;
margin-top: 30px;
}
.right p {
margin: 10px;
font-weight: 900;
}
<div class="box_container">
<div class="left">
<img src="{url}">
</div>
<div class="right">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
</div>
When text in paragraph too long:
.left {
margin: 30px;
float: left;
display: inline-block;
}
.right {
float: left;
margin-top: 30px;
}
.right p {
margin: 10px;
font-weight: 900;
}
.left img {
border: 5px solid white;
}
<div class="box_container">
<div class="left">
<img src="http://monitorgame.com/m/games/001.jpg">
</div>
<div class="right">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5 text text text text text text lalalalalalalalalalalallalalallalalalala</p>
</div>
</div>
You should allocate space for them. I like using floats in these instances, so for example you could add float:left width: 50% to each one, something like that.
.left {
margin: 30px;
float: left;
width: 50%;
}
.right {
float: left;
width: 50%
margin-top: 30px;
}
You already had the float, you just needed to specify the width. They could be static too not % if you want, but if the static sizes don't fit in the screen they will break like your example.
see working here : https://jsfiddle.net/3LtLuxbc/3/
Just a note on the fiddle - I changed your img size to with 100% and removed the border so it would scale , you can change that to suit your design.
Add a width to the right div. This will force the text to wrap. Without a specified width, div will increase in size until reaching max size of wrapper div or page
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/
I have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header.
How do I do this with pure CSS?
What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left.
Do you know of any better way to do this?
Here's a picture so it's easier to understand:
Thanks, Aleksander
EDIT 1:
HTML:
<div class="header">
<div class="header_left">
<div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
</div>
<div class="header_right">
<div class="time">18m ago</div>
<div class="name">Volkswagen</div>
</div>
</div>
CSS:
.header {
}
.header_left {
display: inline-block;
}
.pic {
margin: 5px;
}
.header_right {
display: inline-block;
}
.time {
margin: 5px;
float: right;
}
.name {
margin: 5px;
float:left;
}
It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.
It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here
http://jsfiddle.net/Z68ds/18/
.header {
overflow:hidden;
padding: 4px;
background: #ddd;
}
.caption {
float: right;
font-size: 0.9em;
}
.avatar {
float: left;
}
.title {
margin: 14px 0 0 38px;
}
<div class="header">
<div class="caption">
texty text2
</div>
<img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
<div class="title">texty text1</div>
</div>
You have to use overflow in the element you don't want to set a width without floating it.
#left {
float: left;
width: 100px;
}
#right {
overflow: hidden;
}
This will force the #right element to cover the rest of its parent. No extra markup needed.
Is this what you want to achive?
<div id="header">
<img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
<p id="textRight">texty text2</p>
<p id="textLeft">texty text1</p>
<div class="clearer"></div>
</div>
/* CSS */
#logo {
float: left;
}
#textRight {
float: right;
}
#textLeft {
clear: right;
float: left;
}
.clearer {
clear: both;
}
Here is a fiddle:
http://jsfiddle.net/T26cD/