I know that this questions has been asked several times, but I couldn't find a solution for this specific situation.
So, here's what I have:
DEMO
Basically it's a list of rows:
<ul>
<li>
<label>
<span>element1</span>
<span>element2</span>
<span>element3</span>
<span>element4</span>
</label>
</li>
<li>
<label>
<span>element1</span>
<span>element2</span>
<span>element3</span>
<span>element4</span>
</label>
</li>
</ul>
And the span elements are all inline-blocks and label has text-align: justify.
Everything works as expected, and as I want it to, but the vertical alignment. All the items are attached to the top, kind of. I thought it was the usual inline-block annoyance of the empty line afterward, but I tried setting the font-size to 0, or removing the white space and nothing changed.
This seems to have to do with the line-height – somehow it makes that pseudo element take up additional space. You can mitigate the effects a little bit by setting line-height:0 for the label and the li, and then a line-height:1 for .product-row-price again … but that still doesn’t look that good, it still leaves some space at the bottom. (And a lower line-height will make the text in .product-row-price overlap.)
I think a better solution would be a negative margin-bottom for the label, and overflow set to hidden:
.product-row-label {
margin-bottom: -1.5em;
overflow: hidden;
/* rest of existing styles */
}
http://jsfiddle.net/db0onh6c/7/
FYI: div in span is invalid HTML – so you should replace those divs inside of .product-row-price with spans and make them block.
Still doesn’t look to pretty though, because the different widths of the content in the first and third column makes the whole thing look uneven, so the content in the second column doesn’t align horizontally. (Although with a set width for the first and last column that could be avoided, if you’re ok with a little space at the right of the “shorter” values in the third column – something like this: http://jsfiddle.net/db0onh6c/8/)
Maybe you could try to set property display: table; to <label> elements and display:table-cell; to your <span>elements. This fix element to display as a <table> html element. Just fix padding and margin display properly.
DEMO
Related
I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a
width:auto;
max-width:900px;
and each of the divs has
display:inline-block;
width: 450px;
Now no matter what I do the second div always breaks to another line right below the first div.
Here's the code : http://codepen.io/anon/pen/xgtFd
I have already modified the width of the two divs like for example
width:440px;
but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.
I would be glad for any help.
The widths are too wide.
Bump the nav down to about 446px, and they come back in line.
Why 444px instead of 450px? Two reasons:
Your border is taking 2px.
There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">
If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.
Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).
And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.
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 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;
}
I have maybe a little bit strange task, but I belive there is no better solution. I need to have <ul> in some container which width is changeable and with inlined <li> elements of fixed width. I should (and already found solution) put spaces between <li> elems of same width. Width of spaces is changes dynamicaly and depends of parental container width. Again, this <li> items have fixed width.
I also should place some links above this described elements. For some reasons links must be in other <ul> element. They also wrapped in inlined <li> elems. And I want them to be positioned right above described <li> items. This can be done by setting fixed width of <li> items as above. Now, the problem is that text in every link is actualy have different width and will break into two lines, but I must place it into one line.
So I want to trick browser: text will be overflowing <li> items.
.liElem {
width: 100px;
height: 20px;
overflow: visible;
}
But, as you may guess, text is breaking into two lines and overflowing actually the bottom of list items, not the right side.
The effect I wanted can be done by inserting insted of spaces in text like this: <li>Add to Favourites</li> .
So, my question is this: how in css-way make usual text NOT to break into several lines ?
.nobr { white-space:nowrap; }
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.