I want to set a span element to appear below another element using the display property. I tried applying inline-block but without success, and figured I could use block if I somehow managed to avoid giving the element a width of 100% (I don't want the element to "stretch out"). Can this be done, or if not, what's good praxis for solving this kind of issue?
Example: a news list where I want to set a "read more" link at the end of each post (note: <a> instead of <span>)
<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a>
</li>
Update: Solved. In CSS, apply
li {
clear: both;
}
li a {
display: block;
float: left;
clear: both;
}
Use
display: table
in your CSS code.
If I'm understanding your question properly, the following CSS will float your a below the spans and keep it from having a 100% width:
a {
display: block;
float: left;
clear: left;
}
you can use:
width: max-content;
Note: support is limited, check here for a full breakdown of supporting browsers
I would keep each row to its own div, so...
<div class="row">
<div class="cell">Content</div>
</div>
<div class="row">
<div class="cell">Content</div>
</div>
And then for the CSS:
.cell{display:inline-block}
It's hard to give you a solution without seeing your original code.
Again: an answer that might be a little bit too late (but for those who find this page for the answer anyways).
Instead of
display:block; use display:inline-block;
Try this:
li a {
width: 0px;
white-space:nowrap;
}
I had this issue,
I solved it like so:
.parent {
white-space: nowrap;
display: table;
}
.child {
display: block;
}
the "white-space: nowrap" makes sure that the children of the child(if it has any) don't wrap to new line if there is not enough space.
without "white-space: nowrap" :
with "white-space: nowrap" :
edit: it seems that it also just works without the child block part for me,
so just this seems to work fine.
.parent {
white-space: nowrap;
display: table;
}
You can use the following:
display: inline-block;
Works well on links and other elements.
i use this:
vertical-align: top; //do the trick
a {
display: inline-block;
vertical-align: top;
padding: 10px 30px;
border-radius: 5px;
background-color: #372a20;
border: 1px solid var(--blanco);
color: var(--blanco);
margin: 0 auto -25px;
text-decoration: none;
}
Related
I would like to place two divs within a container side by side and - thanks to SO - I feel I'm almost there, but there is something I really don't understand.
The html looks like this:
<div class="parent">
<div class="font" id="left"></div>
<div class="font" id="right"></div>
</div>
CSS looks like this:
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
height: 100%;
}
#right {
width: 50%;
background: orange;
display: inline-block;
height: 100%;
}
.parent{
font-size:0;
margin: 0;
height: 40px;
}
.font{
font-size:16px;
}
font-size needs to be 0 to account for the whitespaces. display is set at inline-block (I'd rather use display than float).
This works fine. It keeps working when I add content to both the left and the right block. However, when I add content to only one block, this block gets strangely offset from the top. It's like adding margin-top: 50px or something. And I don't get why.
Here's the JSFiddle with content in the left block: https://jsfiddle.net/dave_s/phon1tws/
I've also tried overflow:hidden, but that shrinks the block with the content.
Any help would be much appreciated! Also if someone could explain to me what happens here, that'd be really great!
Thanks a lot!
One way is do use flexbox. Codepen example. Note the support for flexbox and use prefixes.
.parent {
display: flex;
}
add this in css
#left, #right{float:left;}
Alternatively, you can use CSS tables. Your mark-up lends itself nicely to the technique.
The main advantage is that you don't have to alter the font sizes to compensate for the white space that can show up between inline blocks.
Having said that, both approaches will work in your situation.
body {
margin: 0;
}
.parent {
display: table;
width: 100%;
height: 40px;
}
#left, #right {
display: table-cell;
vertical-align: top;
width: 50%;
height: 100%;
}
#left {
background: lightblue;
}
#right {
background: orange;
}
<div class="parent">
<div class="font" id="left">Left Blue</div>
<div class="font" id="right">Right Orange</div>
</div>
Take a look to this really nice guide about Flexbox. Nowadays it's the clearest way to build a layout.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This will work:
.font {
font-size: 16px;
vertical-align: top;
}
By default baselines are vertically aligned. If the <div> is empty, its bottom line will be its baseline. Otherwise the baseline of the first line of text is the baseline to be aligned with.
This problem exists even when there are words in both <div>s but having different font-sizes.
.calloutWrapper
{
background: green;
height: 50%;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.callout {
width: 24%;
min-height: 100%;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background-color: blue; }
.stretch {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
vertical-align: top;
}
http://jsfiddle.net/yux07nom/
There is white space after the "callouts" seen with the blue backgrounds. This extends beyond the green background of "calloutWrapper" I believe its caused by the .stretch applied to the span.
First off you close out the body twice which doesn't cause your problem but should be resolved
</body>
<script>
</script>
</body>
Then the white space is caused by your .stretch span
display: inline-block; is the culprit
Remove that and your good to go.
A bit more info about what you're trying to achieve with that span could help provide a better answer.
If you are trying to achieve responsive boxes you could use a css responsive grid template like bootstrap or foundation.
Alternatively you could just float left and add margin right to the first 3 elements.
eg
http://jsfiddle.net/yux07nom/5/
<div class="calloutWrapper">
<div class="callout">Callout</div>
<div class="callout">Callout</div>
<div class="callout">Callout</div>
<div class="callout last">Callout</div>
</div>
And the CSS
.callout {
width: 24%;
min-height: 100%;
background-color: blue;
float:left;
margin-right:1.3333333333%;
}
.callout.last{
margin-right:0;
}
I'm not sure there's an ideal solution to this. Your best bet is to set the font size of the .calloutWrapper div to zero and then reapply a useful font-size value to the .callout divs, like this : http://jsfiddle.net/2dgx98ye/
Note however, that some older browsers, particularly some used on mobiles, try to apply a minimum font-size which breaks this. In modern browsers, even when the have a minimum font-size configured, do not enforce it on elements where the font-size is 0.
Inline-block elements will preserve one space in the HTML. Two choices:
Have no space between those inline-block elements in the HTML.
Float:left those inline-block elements
I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!
I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.
I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.
How can I vertically align text using inline-block?
Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/
Here is my CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
font-family: helvetica;
}
#status {
width: 100%;
font-size: 0;
}
#line0, #status0 {
display: inline-block;
width: 50%;
vertical-align: middle;
height: 10%;
}
h2 {
font-size: 18px;
}
#line0 {
background-color: #B36305;
color: white;
}
#status0 {
background-color: black;
color: white;
}
And the HTML
<div id ="status">
<div id="line0"></div>
<div id="status0"></div>
</div>
There is an article from Steven Bradley 6 Methods For Vertical Centering With CSS: http://www.vanseodesign.com/css/vertical-centering/
Which solution would be the best depends on your requirements. I think the Absolute Positioning and Negative Margin way could be the solution you need, as your container have a defined height.
When using display:inline-block;vertical-align:middle the element is only vertically centered to the other inline-elements of the current row.
is this what you want ?
JSfiddle Example
If you want both of the divs to be 100% in their width that impossible ! otherwise the rest of the div will hidden by the other one
clarify more what's needed ..
<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div>
<div id="status0"><h2>Good Service</h2></div>
</div>
css code:
#line0{
background:pink;
width:50%;
display: inline-block;
}
#status0{
background:red;
width:49%;
display: inline-block;
}
Why are you using display: inline-block? must you use this way? try to put float: left instead display: inline-block inside block #line0,#status0 and after you can work with text-something else
You Can try this
#line0{
background:pink;
width:50%;
display: inline-block;
float:left;/*added*/
}
#status0{
background:red;
width:50%;
display: inline-block;
}
DEMO
I have a div, containing two <a>. The width of the div is larger than the sum of the widths of the two <a>.
I want the two <a> to wrap, but not to take all the div width. I want them to take the width they usually take when set to display:inline-block, but to wrap like if set to display: block.
I need a css only solution.
Here is a jsfiddle to explain my example. Thanks!
<div class="content">
<a>
<span>content1</span>
</a>
<a>
<span>content2</span>
</a>
</div>
Here is one way you might try:
div{
width:300px;
border: 1px solid red;
overflow: auto;
}
a{
display: block;
background-color: #dddddd;
float: left;
clear: both;
}
Float the a to the left and use clear: both.
Apply overflow: auto to the parent div to retain the floats within the block.
See demo at: http://jsfiddle.net/audetwebdesign/cKW4t/2/
I assumed that by wanting the elements to wrap, you mean each starts on a new line.
Not sure exactly what you are asking for but try moving the display:block/inline-block to .content instead of a.
Does that solve your problem?
div{
width:300px;
border: 1px solid red;
display: block;
}
a{
background-color: #dddddd;
}
jsfiddle
Here you go:
a {
display: inline;
background-color: #dddddd;
}
a+a:before {
content:"\a";
white-space: pre;
}
I would like to add that if there is content inside you div, or if you div has a min-height, there might be a better solution.
I have this code :
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
margin-top: 20px;
}
<div class="myDiv">
<a class="myLink" href="javascript:void(0)">Ciao</a>
</div>
if I increase the margin-top I'd aspect that the div becomes more hight (and the go to the bottom of the div), but in fact this doesnt happens! The same with padding-top (it go out of the div...). It doesnt listen the container!
Why? And how can I fix this trouble?
EDIT
in fact what Id like to do is align an input box and a image, you can see the example here :
<div>
<input type="text" />
<a style="margin-top:10px; margin-left:5px;" href="#">
<img alt="Cerca" src="/private_images/home_button_right.png">
</a>
</div>
Change to:
.myLink
{
background-color: red;
padding-top: 100px;
display: inline-block;
}
or
div {
padding-top: 100px;
}
depending on what you want to achieve.
Based on your update of the question:
Updated Demo fiddle.
CSS:
input,
img {
vertical-align: middle;
}
Or use vertical-align: top; to align the tops.
Do the opposite thing:
.myDiv
{
background-color: blue;
padding-bottom: 20px;
}
.myLink
{
background-color: red;
}
Add display: block; or maybe even better: display: inline-block;. Block elements can have height. Inline elements not.
You might also consider to give the anchor a larger line-height (e.g. line-height: 2em;), but that only works for single-line text.
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
display:list-item;
}
You can use display:list-item; to solve this problem