I have a div inside which there are a couple of divs containing just plain text. but whenever the outer div is given a width, the child div also gets the same size. is there any way to not make this occur so that the child divs get covered for only the text inside it, while the outer div can have any size?
Use display:inline-block
HTML:
<div class="container">
<div class="text">text1</div>
<br />
<div class="text">text some text</div>
</div>
CSS:
.text{display:inline-block;}
Fiddle here.
Related
I have a document with two images and some text. The first image is floated left, the second one floated right.
The problem is that text from DIVs overlaps the second image. The text "First DIV after second image" should be placed below the first image and to the left of the second image (since it's after the second IMG tag). What am I missing?
Fiddle: http://jsfiddle.net/yLUnC/4/
Html:
<div class="wrapper">
<div>DIV before first image</div>
<img class="floatLeft" src="http://placehold.it/200x100&text=First+image">
<div>DIV after first, before second</div>
<img class="floatRight" src="http://placehold.it/200x100&text=Second+image">
<div>First DIV after second image</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text overlapping second image, not good</div>
<div>last DIV</div>
</div>
You need to give all the Child elements display:inline and give other special elements display: block. and also most important thing is to give overflow: auto to the parent element so that it counts the height of the floated child elements (such as the second image).
Here is the working fiddle
Update:
As you have not assigned any classes to those elements, I am adding inline styling to those special elements.
Updated Fiddle (Change as you need)
I have a container with several floated divs within it. I want the div to stretch to the full height of it's content.
I have tried adding overflow:visible to the container to make it expand and also added a clear but neither seem to work.
Live site link available here
You need to put something not floated in the div and clear that.
<div class="magical-div>
<div class="float1"> content </div>
<div class="float2"> content </div>
<div style="display:block;clear:both;"> </div>
</div>
http://jsfiddle.net/uCwEz/
I need to have three divs, with the first and last div (red and blue) having a fixed width, and the middle div (green) dynamically changing its width to fit perfectly between the outside divs as the page width is adjusted. In the jsFiddle, I've accomplished this with the fixed-width first div and content adjusting, and I've floated the third div right, but it needs to slide up into the empty space you see next to the main div.
Just move #div3 between #div1 and #div2 in your HTML.
<div id="container">
<div id="div1">
</div>
<div id="div3">
</div>
<div id="div2">
</div>
</div>
Demo http://jsfiddle.net/thebabydino/uCwEz/2/
I am trying to create a variable height div. It seems if the div's inside the variable height div are set to float:left The variable height div gets a height of 0. If I set the variable height div float:left the div grows with the content inside it but now the variable height div is sent to the left of the screen instead of the center. How do I keep the main div in the center but also have it grow with it's child div's?
<div id="VariableHeightDiv">
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="clear"></div>
</div>
and in your css
.clear{clear:both;}
You need to clear the floats, otherwise the browser is unable to understand and calculate correctly the height of the container div. That is why in the end we add an empty div with clear:both.
Adding overflow: auto; to your main div will keep it centered, and will also force it to wrap around the elements inside of it. Two great articles on the float property and the overflow property can be found here: http://css-tricks.com/all-about-floats/ / http://css-tricks.com/the-css-overflow-property/
I wouldn't recommend using the <div style="clear: both;"> technique, because it's unnecessary extra markup, and doesn't add anything to the presentation.
Floated divs are somewhat removed from the document's "flow". You can force a container div to completely surround its contents, even if they're floated, by using a clearing element afterwards:
<div>
<div style="float: left">blah blah</div>
<br style="clear: both" />
</div>
There's better methods detailed here.
For the main div, include these CSS rules:
margin: 0 auto;
overflow: auto;
Also make sure that you have a min-height and width property set for the main div.
Edit: I've included the overflow property as well.
add overflow:hidden or overflow:scroll or overflow:auto for the parent div.
More info http://www.quirksmode.org/css/clearing.html
example: http://jsfiddle.net/MbgH4/1
I have a square div that is housing a javascript image slideshow. I incorporated a caption into the slideshow which requires the containing div to be position:relative. I then want text to wrap around this slideshow... is this possible?
My pseudo structure:
<div position:relative>
<div slideshow stuff>
<div position:absolute>Caption</div>
</div>
</div>
How can I wrap text around this?
Damn, it's always AFTER I post for help that I figure it out. Doh.
For those interested, this is my solution (again in pseudo code):
<div position:relative float:left margin-left/bottom:20px>
<div slideshow stuff>
<div position:absolute>Caption</div>
</div>
</div>
<div>this text now wraps</div>`
You need to float the div if you want to wrap text around it.