I feel like this should be really easy, but I've been playing with it for ages and haven't gotten anywhere.
I have a div, and my images inside it are set to width:100%. This works as you'd expect, with the images appearing edge to edge inside the div.
For paragraphs inside this div, I have padding.
What I'd like, is for images inside those paragraphs to also appear at the full width of the div (not the paragraph, which is narrower, due to the padding). However I do need to keep the padding, as I need it or the text.
HTML (Which can't be changed):
<div id="grandparent">
<img src="whatever" />
<!-- this next image should be exactly the same width as the first one -->
<p><img src ="whatever" /> This text still needs to be padded though.</p>
</div>
CSS:
p {
padding:15px;
}
img {
width:100%;
}
I have tried adding a negative margin to the image (using the CSS below), which gets it over to the edge, but I can't accurately make it the same width as the div.
CSS:
p img {
/*starts the img in the right place, but doesn't fix the width */
margin-left:-15px;
margin-right:-15px;
}
One thing you can do is use the css calc property. Try the code below. Keep in mind that calc does not work in some older browsers.
Fiddle: http://jsfiddle.net/q8Lb7t3t/6/
html
<div class='gp'>
<img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
<p>
<img class='img-pad' src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
text text text text text text text text text text
text text text text text text text text text text
text text text textext text text text text text text
</p>
</div>
css
.gp {
width: 300px;
background-color: #eee;
}
img {
display: inline-block;
width: 100%;
height: auto;
}
.img-pad {
margin-left: -20px;
width: calc(100% + 40px);
}
p {
padding: 20px;
}
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>
I have a div that contains a float left image and then text. It does the following.
.outer-div {
max-width: 95%;
background-color: yellow;
display: inline-block;
}
.image {
float: left;
}
<div class="outer-div">
<img class="image" src="http://www.w3schools.com/images/colorpicker.png">
<div class="test">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>
Note, how it creates the outer div size based on the text alone and then it inserts the floating image, causing the text to wrap. I want the outer div width to be the width of the floated image + the width of the text, and then only line-break when it reaches the max-width of 95%.
EDIT: I also don't want ALL of the text to go below the image once the first line reaches the edge of the page. However, when there is a lot of text, I do want it to wrap under the image.
You can use flexbox to achieve that, see the example below:
jsFiddle
.outer-div {
display: inline-flex;
align-items: flex-start;
max-width: 95%;
background-color: yellow;
}
<div class="outer-div">
<img class="image" src="http://www.w3schools.com/images/colorpicker.png">
<div class="test">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>
Using "inline-block" on the test DIV should set it to align next to the other block. Add the following to your CSS section and you should be good.
.test {
display: inline-block;
}
Then you can add the following if you wanted it to be centered at the top rather than the bottom:
vertical-align: top;
Hopefully this helps you out! Best of luck!
A friend of mine was messing around and found the answer. The answer is to float the image inside the test div with the text. No changes need to be made to the CSS.
Example below:
.outer-div {
max-width: 95%;
background-color: yellow;
display: inline-block;
}
.image {
float: left;
}
<div class="outer-div">
<div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>
Here is an example with a lot of text to verify that it wraps under the image.
.outer-div {
max-width: 95%;
background-color: yellow;
display: inline-block;
}
.image {
float: left;
}
<div class="outer-div">
<div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.</div>
</div>
Thanks to everyone who provided answers. Your answers will definitely help me with things in the future, so upvotes to you all. :)
Try adding this to your code
width: fit-content;
I have a box, the size of which is defined by the img in it. in this image there is a button which can hold a text of arbitrary quantity. If the text is less than the image beihnd it, then the button is to be placed in the middle, and if the text is more than the image, then it has to be cut with text-ellipsis. The maximum size of the text must be the width of the image so it cannot go over the box even if it does not fit in. Does anybody know a solition for this ONLY using CSS? Here is the demo: http://jsfiddle.net/h3emzbcq/3/
<div class="border-box">
<div class="item-pic">
<img src="http://demo7.firstvoicemedia.com/u5.png" alt="" class="img-responsive">
<div class="item-btn">
<button class="btn btn-green"><span class="btn-text">Text place Text place Text placeText place Text place Text place</span></button>
</div>
</div>
Text place
Thanks for your answers.
Remove width and set max-width: 100% on the <button>:
.btn {
border: 0;
padding: 0;
margin: 0;
/* added */
max-width: 100%;
}
Here is the updated fiddle.
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.
Please modify this example so as to show me how I can have the text beside the image vertivally aligned beside the middle of the image.
Demo: http://jsfiddle.net/Blender/sVx5e/1/
HTML:
<div onclick="window.location = '#'">
<img src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb1.png">
jsFiddle
</div>
CSS:
div {
height: 150px; /* This is the height of the image */
line-height: 150px;
}
img {
float: left;
}
Use a <div>, not a <a> element, when wrapping blocks of elements. IE chokes up when you do...