So I am trying to get the text beneath an image to not go wider than the image itself. I can't quite figure it out.
It would be easy if the parent div had a fixed width, but the width of the parent and the image within are variable based on the image width.
I have it as a sibling currently, but maybe making it a child on the image div is the solution.
Here is a jsfiddle: http://jsfiddle.net/z6f15coy/1/
<div class='parent'>
<div class="child_1">
<img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg" >
</div>
<div class="child_2">
Some text that is wider than the image goes here... Lorem ipsum whatever.
</div>
</div>
Sincere thanks for any help. It is greatly appreciated.
You could relay on table display behavior :
.parent {
border: 1px solid #c4c4c4;
padding:5px;
margin:5px;
display:table;
width:1px;/* will extand to fit longest content (image or a very long word) */
}
<div class='parent' style="">
<div class="child_1">
<img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg">
</div>
<div class="child_2">Some text that is wider than the image goes here... Lorem ipsum whatever.</div>
</div>
Define a width for that div?
try this if i got you.
http://jsfiddle.net/z6f15coy/2/
Related
If you’re trapped in a page wrap - say all the contents of the page are in a div whose width is 900px, then you want one div WITHIN that that’s the full page width. What’s the easiest way to do this?
I know you can end the 900px div, do the full width div, and then start another 900px div, but is there a way to style the inner div so you don't have to escape it? 100vw works for making it the right size but doesn't position it in the right spot.
So simplistic example:
<div style="width:900px;margin-right:auto;margin-left:auto;display:block;">
<p>text text</p>
<div style="width:100vw;">
<p>I want this section to be the full page width and centered</p>
</div>
<p>text text</p>
</div>
Thanks!
You can use negative left margin (-50vw + half parent width).
body {margin: 0;}
#a {background: red;}
#b {background: green; margin-left: calc(-50vw + 200px)
<div id="a" style="width:400px;margin-right:auto;margin-left:auto;display:block;">
<p>text text</p>
<div style="width:100vw;" id="b">
<p>I want this section to be the full page width and centered</p>
</div>
<p>text text</p>
</div>
For this code example I've added IDs (for cleaner CSS styles) and change parent div to 400px (because there is smaller window).
I don't recommend trying to make a child div "escape" its parent because going with that approach will require pointlessly complicated CSS. You can accomplish what you want with a container div and a couple nested children which is a much simpler solution:
.narrow {
width: 300px;
margin: 0 auto;
background-color: tomato;
padding: 16px;
}
.full {
background-color: gold;
padding: 16px;
}
<div>
<div class="narrow">
<p>text text text</p>
</div>
<div class="full">
<p>more text or image or whatever</p>
</div>
<div class="narrow">
<p>text text text</p>
</div>
</div>
I would argue that the way you are trying to solve the issue is not very helpful for an actual website. Normally, you would have a container, your top div, which contains its lower elements. Making a child element go outside its parent div like you seem to want goes against that mentality.
Of course, sometimes you may want to put an element outside its parent, and you can use pavel's answer. For example, maybe you want to animate a line moving. You would then offset that element by -100% and then change that offset to give it the impression of movement. But that would be a special case.
To solve your problem, I would use the following structure:
Here is a link to the example too.
<div class='container'>
<div class='thin'>
<p>text text</p>
</div>
<div class='full-width'>
<p>I want this section to be the full page width and centered</p>
</div>
<div class='thin'>
<p>text text</p>
</div>
</div>
.container{
text-align:center;
padding: 0 5vw; //padding of 5vw to the left and right
}
.thin{
width:80vw;
margin: 0 auto;
background-color:yellow;
}
.full-width{
background-color:green;
}
I'm sure it's an easy question but I can't figure it out.
I have this code basically
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
I want the image to align to the right of the text within the div. Everything I've tried so far takes the image out of the normal page flow making the div not respect the height of the image. I can't just explicitly state the height of the div because the image inside is dynamic and only of set width.
Here's what the page looks like.
How do I align the image to the right of the div and still have the div respect the height of the image.
Basically your div must have overflow:hidden, look example:
<div style="overflow:hidden">
<img style="float:right; width:100px; height:100px"/>
<div>text text text text text text text text</div>
</div>
<div style="overflow:hidden">
<img style="float:right; width:100px; height:100px"/>
<div>text text text text text text text text</div>
</div>
Alternatively you can put <div style="clear:both"></div> after each div
In css set the overflow of the div that has to respect the height of the image to auto.
div {
overflow: auto;
}
It is because of the float on the image. In order to fix this, you may use a method called clearfix on the container element: div.infobox
.infoBox:after {
content: "";
display: table;
clear: both;
}
Fiddle here.
I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.
My problem is this. I have container and inside him i have 2 more containers one of the containers i use to put image and other container i use to put header and paragraphs. I want to make something like short preview of a news and i will have multiple copies of this containers with different images and different headers and paragraph and i don't want to always adjust the height of the parent container i want to automatically adjust his height. Can i do that with CSS and how ?
Here is example code
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src=" ">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
Here is CSS
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
The containers inside boxForNews are growing accordingly to the elements i put inside them but their parent do not grow accordingly to the grow of the 2 containers and my jumbotron gets broken because of this.
I Could give the first container some height but i the content i put inside the 2 containers inside him will always change and i will have to always play and change the height for every news i add.
First the errors in the code; You are missing an end quoation mark for the class attribute boxForImage, and the style rule .boxForImage ends with { instead of }.
The floating elements in the boxForNews div won't affect the height of their parent. You can make it contain its children by changing the overflow style:
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
.boxForNews {
overflow: hidden;
background: #eee;
}
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src="http://placehold.it/100x100">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
I am trying to make my own website and only know some basic HTML, I've searched the web for a bit and can't seem to figure out how to place text under an image and on the left of the image.
So pretty much:
[image] [text]
[text]
would pretty much be my layout of the web page. At the moment I can only float the image or align it to the left making the text wrap around the image, which I don't want. Can someone help me?
<div style="width:400px; clear:both;">
<img src="http://media.techworld.com/cmsdata/news/3246520/1998_google.jpg" style="width:300px; float:left;" />
<div style="width:100px; float:left;">
text beside image
</div>
</div>
<div style="clear:both;">
text beneath image
</div>
http://jsfiddle.net/Tw2v7/
This is a simple layout matter; I think it should be done without using a table.
You can add an additional "clear: both"-Element behind the text you are floating next to the image, like so:
http://jsfiddle.net/nENVN/
I would suggest using divs instead of tables and then using CSS to size and position the divs
<div class="image">Image goes here</div>
<div class="rtext">text on right of image here</div>
<div class="ltext">text below image here</div>
This is the basic style for the above
.image {width:200px; float:left}
.rtext {width:200px; float:left}
.ltext {width:400px}
the ltext div would then be set to a width that is to wide to sit next to the image or the rtext div. It would then be forced to sit below the other 2 divs. This should achieve the look you want.
Use floats:
<img src="" alt="" class="left" /><span>Your text goes here and will wrap around and below the image</span>
<p>More text to sit below the image</p>
The text will appear beside the image and then wrap around to the bottom if it's long enough
Is this what youre after?
http://jsfiddle.net/ptzDw/
Basic HTML Structure:
<div id="wrap">
<div id="left">
<img src="http://dummyimage.com/300x90/7999/fff" alt="image">
<p>text goes here</p>
</div>
<div id="right">
<p>text goes here</p>
</div>
</div>
CSS:
#wrap { width: 800px; }
#left { width: 300px; float: left; }
#right { width: 400px; float: left; margin-left: 10px;}