I have a problem with a <div> not sizing up the content (which is two <p> elements). The content is floated.
I have one <p> tag floated to the left
I have one <p> tag floated to
the right
I have one empty <div> tag below with style="clear:both"
Still, the <div> that contains the whole thing is 3 lines tall - not just 1 as it is supposed to be. What am I missing to make it work?
I prepared a fiddle and it works well - it must be an error in your code. Show us some pieces of it.
Example
Be sure to have no paddings/margins/height/lineheight affect your divs and ps (=reset browserdefaults!). Also the parent div needs to be wide enough to hold both p. Also, if you have non-floated content, the order matters.
I believe <p> elements have a default margin, try setting margin to 0px, and that may remove the the spacing.
First, float both <p> tags to the left.
Then, make sure that the <div> has a large enough width to accomodate both of the <p> tags.
You should be able to get them in one line after that.
http://jsfiddle.net/myJ3W/1/
Just to show you why float right might not be a good idea (it really depends on what you're trying to do.. Dialog boxes?)
If you use float: right;, your formatting breaks after the paragraph gets too long:
http://jsfiddle.net/myJ3W/3/
Whereas if you use float: left; for both put them into containers, you can be sure that they will stick within their boxes:
http://jsfiddle.net/myJ3W/4/
Again, really depends on what you're trying to achieve here.
Is there enough space in the outer most <div> so that each <p> is a single line? If not, one will break down below the other. In addition, your clear both <div> will have full line height as well. Here is the style I apply to a class called cb that I apply in those situations...
.cb
{
clear:both !important;
float:none !important;
height:1px;
line-height:0;
margin:0;
padding:0;
}
Related
As you see, I'm trying to put two <p> in one line. What am I doing wrong?
You look for the width of the div you putting the two P's if the width of the div is less than the width of the two text then the second P will automatically move to next line if div size large then you apply float property of css on div with position relative
Make the container bigger. Or the font smaller so it fits in one line.
<p>s are, by default, block elements, so they aren't normally displayed inline.
To fix this, you have to add display:inline; to the style tag in each of your <p>s.
If this still doesn't work, that means that the containing <div> isn't wide enough for both of them to be side by side.
Which means that you have to increase the width of the <div>.
After a lot of research about floats i am confused why there is so much information on the web that a float should always have a width defined. It is often said, that the float will take the whole space and therefore behave like a normal block element. but with regard to the information here http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float the float will always shrink-to-fit. as i understand the float will never take the whole space unless it needs to.
when thinking about navigation items, is there a need to specify a width? i don't think in this case. maybe when content inside the float is too large?
it was also discussed here Do you really need a width on floated element? but there is no clear statement, that this is not necessary.
I don't think all floated elements require fixed widths, but perhaps any positional CSS that includes dividing your page into 3 columns, you may want to consider fixing the widths on the columns floated to left/right. One reason for this is because navigation bars or forum posts or some sort of list of hyper links is often aligned on the sides of the pages, and if these 2 columns are not fixed, the character limit of your anchor links will be limited as the screen size decreases. You may not want your inline anchor tags wrapping across multiple lines when the screen shrinks. Fixed Widths would eliminate this.
Floats dont need a width. The advantage and disadvantage as well is a collapsing container, if there is no content in it.
Have a look at: Expand div to max width when float:left is set
Deleting all p-tags in the div-tag (class right) shows the effect: no more red background
.content .left{
float:left;
width:100px;
background-color:green;
}
.content .right{
margin-left:100px;
background-color:red;
}
<div class="content">
<div class="left">
<p>Hi # all</p>
</div>
<div class="right">
<!-- no content no backgroundcolor -->
</div>
</div>
I have a simple layout composed of boxes.
Fiddle of the code
I have <div> tags within <div> tags; I'm using them to 'define' blocks where I can later print out inputs.
<div class=display-window>
<div id=pieces>
</div>
<div id=vline></div>
<div id=message>
<p>Nothing special is going on</p>
</div>
</div>
When I take the <p> element out, the display is fine. But when it's there, the box slides down, making it way off. This is true for both #pieces and #message, here. It seems that the box slides until the paragraph is against its top. I want the box to stay there.
Shouldn't child elements leave their parents undisturbed if they can?! This feels very inflexible!
Note: I get widely different results between codecademy.com and fiddle.net, so it's difficult for me to tell what is going on exactly. Margins and padding solve the problem, but this is, again, inflexible: I want to remove the tags during execution.
This has to do with your inline-block style elements. By default, all inline-block elements have a vertical-align set to baseline, which in your case is the bottom [line-height] (probably 16px) of your vertical line (div#vline) in the middle of your div.
Set the v-align to top on the p element's container and it works great:
#message
{
vertical-align: top;
}
JSFiddle
I'm creating a list of search results, using an unordered list, each <li> is made up of 3 sections (floats):
http://jsfiddle.net/danmofo/fYMrL/4/
My problem is that everytime the text inside <p> exceeds the width of the the column, the floats cascade down the page, breaking the layout.
It's been a long day so probably a minor error somewhere, but I cannot see it.
Things I've tried doing when the text cascades:
Making all elements inline
Defining specific widths
Any help is appreciated, especially link to an article/some information about it, thanks.
Give your floated elements widths, or the floats won't work predictably.
Something like
div.left-side{
float: left;
width:40%;
}
div.right-side{
float:right;
width:20%;
}
I think the problem is the div under the p. It is a block element that wants to take up a whole line. Set the style to "display: inline" for this div.
I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly.
However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.
Here is a beautiful mspaint depiction of the situation:
Note that the green part of the black horizontal line is behind the floating div.
How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?
I know this problem was posted some time ago, but I had the same problem today and found another solution:
http://jsfiddle.net/MvX62/
I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.
Also you don't need to define z values and don't need any hacks or workarounds.
I've had this problem before, and I wasn't sure if it was solvable.
In your case, however, you could wrap the green box with another element and swap margin with padding and set its background to #fff to cover the offending line.
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/8BwGB/3/
What I did here was give the floated element a z-index CSS property, which will put it "above" the non floated element (which has a smaller valued z-index) and the <hr /> will not go above the floated element.
In regards to getting it as wide as the text, in my example it is as wide as the text, but I'm not sure if that holds across browsers (I'm on Chrome). Let me know if it doesn't.
I hope this helps.
Hristo
p.s. excellent mspaint skillz :)
You would have to set the width of the paragraphs to the width of the container minus the width of the floating element, or you could give them a margin on the same side of the float equal to the float's width.
Div cannot wrap around another div. Wrapping is text-only property. You can simulate wrapping by setting the margin-right for the master div to the width of the div you want it to wrap, but text wil not flow under the inset div.
Some values of the overflow property can cause this behavior. Specifically, overflow: visible which is often set by popular CSS resets/normalization.