I'm trying to place text on the right side of an image. I need the text to "break" without going beneath the image.
The "break" in the text is the result of the intentionally confined width.
I've made a JSFiddle of what I'm trying to do, but it is broken. Some of the text is to the right of the image, which is correct, and the rest is below the image, which is incorrect.
What can I do to fix this? I'm free to use most any markup or styling; I am not restricted to the div elements in my example.
I have modified the code for you. I hope it helps.
<body style="width: 280px">
<img style="float: left;margin-right:20px;" src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div style="word-wrap:break-word">Jonathan-Paul Montgomery-Benson</div>
</body>
The better way to code it is to avoid inline style. Here is the snippet for this:
body {
width: 280px;
}
img {
float: left;
margin-right: 20px;
}
.break {
word-wrap: break-word;
}
<body>
<img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div class="break">Jonathan-Paul Montgomery-Benson</div>
</body>
I have done some changes in the markup. Hope this will help.
.block {
display: flex;
width: 280px;
}
img {
max-width: 100%;
}
<body>
<div class="block"><img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div>Jonathan-Paul Montgomery-Benson</div>
</div>
</body>
I have done it it like this.Hope this helps.
.class-txt{
display: inline;
word-wrap: break-word;
width: 60%;
position: relative;
float: left;
}
.img-class{
width : 40%;
float:left;
}
<body style="width: 280px">
<img class='img-class' src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div class="class-txt" style="display:inline; word-wrap: break-word;">Jonathan-Paul Montgomery-Bensononathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson</div>
</body>
Try to use display:flex; css style property
<body style="width: 280px">
<img style="float: left;margin-right:20px;" src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div style="display:flex;">Jonathan-Paul Montgomery-Benson Jonathan-Paul Montgomery-Benson </div>
</body>
<body>
<div style="display:inline-flex; word-wrap: break-word;">
<img style="float: left;" src="https://v.cdn.vine.co/r/avatars /23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div>Jonathan-Paul Montgomery-Benson</div>
</div>
</body>
You can use the following markup to achieve this.
.row{width:280px;}
.row:after{clear:both; content:""; display:block;}
.img-col{width:40%; float:left;}
.img-col img{width:100%; height:auto;}
.des-col{width:57%; float:right;}
<div class="row">
<div class="img-col">
<img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
</div>
<div class="des-col">Jonathan-Paul Montgomery-Benson</div>
</div>
You can set the ".img-col" width according to your design.
Related
I've seen working examples of middle-aligning a single line of text next to an image, like so:
<div>
<img style="vertical-align:middle" src="testImage.png" />
<span style="">This works</span>
</div>
But I need to align two spans, one above the other, because they will eventually need to have different styles, and the following results in the second span being rendered beneath the image:
<div>
<img style="vertical-align:middle;" src="testImage.png" />
<span>This doesn't work</span><br />
<span>I'm annoyed</span>
</div>
NOTE: I did experiment with using float:left; for the image, which does work to a degree, but fails when the text is long enough that it requires the div to expand (it does not factor in the width of the image and produces an undesired text-wrap)
EDIT: This is an example of the solution that worked for me, based on the answer given by aje, containing a small tweak of adding vertical-align: middle; to the div tag. I've included this as an edit, rather than add my own answer, because I'd like to credit aje with the answer that helped me:
<div style="border: solid 2px green;">
<img style="border: solid 2px black; vertical-align: middle; width: 32px; height: 32px;" src="https://dummyimage.com/300.png/09f/fff" />
<div style="vertical-align: middle; display: inline-block">
<span>This now works properly.</span><br />
<span>Thanks for the help!</span>
</div>
</div>
Wrap span under a div below is a snippet
<div>
<img style="vertical-align:middle;" src="https://dummyimage.com/300.png/09f/fff" />
<div style="display:inline-block"><span>This doesn't work</span><br />
<span>I'm annoyed</span>
</div>
</div>
div {
display:table;
}
div img {
float:left;
margin-right: 10px;
width: 200px;
}
div p {
display:table-cell;
vertical-align:middle;
}
div span {
display: block;
}
div:after { /* it's always good practice to clear floats */
content: '';
display: block;
clear: both;
}
<div>
<img style="vertical-align:middle;" src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" />
<p>
<span>This doesn't work</span>
<span>I'm annoyed</span>
</p>
</div>
I have a section in my site that should stretch all the way across the screen.
I want to add 4 images in this section, one beside the other, and make them responsive. I want them to fill the background and breaks between them as needed. How should I modify my code below to accomplish the effects I desire?
#games {
background-color: #000;
}
#games img {
width: 100%;
height: auto;
}
.4columns {
width: 32%;
display: inline-block;
}
<section id="games" class="section section-games">
<div class="container-fluid">
<div class="row">
<img class="4columns" src="resources/media/icons/1.png">
<img class="4columns" src="resources/media/icons/2.png">
<img class="4columns" src="resources/media/icons/3.png">
<img class="4columns" src="resources/media/icons/4.png">
</div>
</div>
</section>
I think you want something like this :
.map{
margin:0;
padding:0;
}
.map img{
float: left;
width: 25%;
}
<div class="map">
<span>
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
</span>
</div>
I have a 3 column grid, which is sitting inside a 100% container div. But as of now it is just being pulled all the way to the left side of the page. I want the three columns to be div to be centered inside the container. Here is a screenshot of the design that I'm trying to code: To fix the margin issue between each grid box, I used the technique found here (Scroll down to the last section "Roll your own...")
HTML:
<div class="featured-properties">
<div class="properties">
<div class="property">
<img src="img/sample-prop-1.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-2.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-3.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-4.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-5.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-6.jpg" alt="Sample Property" />
</div>
</div><!-- end .properties -->
</div><!-- end .featured-properties -->
CSS:
.featured-properties {
width: 100%;
}
.properties {
margin: -79px;
overflow: hidden;
clear: both;
width: 1047px;
}
.property {
float: left;
margin-left: 79px;
}
No need explanation, see the CSS below and demo (responsive!).
DEMO: http://jsfiddle.net/0m5p2818/
.properties {
text-align: center;
max-width: 720px; /* (200+(20x2))x3 */
font-size: 0; /* fix for white space bug */
margin-left: auto;
margin-right: auto;
}
.property {
display: inline-block;
margin: 20px;
font-size: 16px;
}
I'm not really sure if I understood your question, but I think CSS 3 Flexbox can help you to achieve what I think you need.
Take a look at it here and see if it works for you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
I have a page that I want centered, with a background and a border around the entire content.
I made a div and set it with the background color and the border settings I want.
Problem is that it has divs inside it that float and the background does not stretch around the floating divs. The only way I was able to get it to work was by setting position:absolute. Then the border did expand around the floating divs but I was unable to center them using regular html/css.
I found a javascript hack to make it center but it only centers after the page loads and it looks bad.
I am sure there is a way to have the container expand and still have it centered, I just can't figure it out.
here is a sample html page that shares my problems
<div style="background-color: Red; width: 980px; position: absolute;" id="container">
<br />
<br />
<br />
<br />
<div style="width: 400px; background-color: Black; float: left;">
<br />
<br />
</div>
<div style="width: 400px; background-color: Blue; float: left;">
<br />
<br />
</div>
</div>
and here is the Javascript that makes it work (uses Jquery)
$(function() {
var winH = $(window).height();
var winW = $(window).width();
$("#container").css('left', winW / 2 - $("#container").width() / 2);
});
There has got to be a better way.
Thanks
Use auto as left and right margin to center the element.
Put an element after the floating elements and use clear to put it below them. As it's not floating, it will affect the size of the outer div.
<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container">
<br />
<br />
<br />
<br />
<div style="width: 400px; background-color: Black; float: left;">
<br />
<br />
</div>
<div style="width: 400px; background-color: Blue; float: left;">
<br />
<br />
</div>
<div style="clear: both; height: 0; overflow: hidden;"></div>
</div>
this is a tricky one, but I use the following code in stylesheets;
<style>div.sentor {text-align: center; height: 100%;} div.child{margin-left: auto; margin-right: auto; width: 95%; height: 100%;}</style>
then in the body;
<div class="sentor">
<div class="child">
<div id="mycontent">
this should do the trick
Use:
<div style="margin:0 auto; overflow:hidden; background-color: Red; width: 980px; id="container">
The margin: 0 auto; will center the red div.
The overflow: hidden; will make the red div stretch to contain the two floating divs.
Maybe I'm not understanding your question well enough, but I think you're looking for something similar to this. Here's our simple layout:
<html>
<head>
...
</head>
<body>
<div id="center">
<!-- your content -->
</div>
</body>
</html>
To get the contents of div#center to move to the center of the page, we need the following CSS:
body {
text-align: center;
}
div#center {
text-align: left;
width: 600px; // Or some other arbitrary width
margin: 0 auto;
}
This will center everything within body. However, the text-align: center; property will also be applied to the children of body, so we cancel that out with the second style rule. Alternatively, in place of div#center, you could use the following style rule:
body * {
text-align: left;
}