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.
Related
I have 2 inner divs inside an outer div, and I want to make the outer div to automatically fit to the width of the inner divs. Is that possible?
body {
font-size: 0;
}
#outer {
border: 1px solid black;
}
.inner {
font-size: 12px;
display: inline-block;
border: 1px solid red;
}
<div id='outer'>
<div class='inner'>text1</div>
<div class='inner'>text2</div>
</div>
Your outer div is a block-level element. You need to make it an inline-level element. Inline elements automatically take the size of the content it contains. In terms of the question you've asked, just setting :
display: inline-block
on your outer div will do the trick. See the code snippet below for the demo :
body {
font-size: 0;
}
#outer {
border: 1px solid black;
display: inline-block;
}
.inner {
font-size: 12px;
display: inline-block;
border: 1px solid red;
}
<div id='outer'>
<div class='inner'>
text1
</div>
<div class='inner'>
text2
</div>
</div>
Hope this helps!!!
Add "display: table;" to the #outer css:
For example:
#outer {
border: 1px solid black;
display: table;
}
using display: table is less intrusive as using inline
If you add position:absolute; or float:left; to #outer it will size to the two inner div's. For this instance, I would use the float. Floats are generally better for content that might change or expand/shrink with edits over time whereas absolute positioning should be used outside of the document flow or structure of the document, like a nav bar.
Edit: If you don't need other elements to flow around the outer div the display:inline-block method posted below will work, but if you have elements you want to flow around #outer then float:left would be the way to go. Say you have #outer as 50% of the width and want something else on the other half of the page using display:inline-block will put other elements below #outer.
CodePen link to show difference
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
Following my code:
HTML:
<div>aaaaaaaaaaaaaaa
<span>test</span>
</div>
CSS:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
}
span{
float: right
}
I would get this result: http://oi41.tinypic.com/2py25w1.jpg
I would like the text right-floated should not have to get out the div, so it must go to a new line inside the div when needed, as in the code that I posted.
In this case, for example, there is no need to let go of the text in a new line, because the text fits on the right of the text: http://jsfiddle.net/3kRan/2/
Set the overflow on your div to hidden like so:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
overflow: hidden;
}
Your contents are overflowing when the span tries to float. This will allow your span to stay within its parent container.
This answer depends on your ability to wrap your text in an element, such as p. The ending result would be:
<div><p>aaaaaaaaaa</p>
<span>test</span>
</div>
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
height: 100%;
overflow: auto; /* fix to clear the parent */
}
p {
padding:0;
margin:0;
}
span{
float: right
}
Updated fiddle: http://jsfiddle.net/3kRan/5/
I have to divs layouted as display: inline-block. Intentionally, I want these two divs (tileImage, title) to share the 300px width of the parent div (preview). Thus, I have set their width to 50%. For some reason the second div is moved to the next line.
Changing the width of div "title" to 48% will move the div next to the div "titleImage". There you notice the space in between. Where does this space come from? How do I get rid of it?
Here is the JFiddle: http://jsfiddle.net/SFDPe/2/
Thanks!
You should float your elements to the left and right, instead. Then, make sure you set height: auto; and overflow: auto; to the parent container. This ensures that the .parent container actually overflows and grows automatically when elements are floated inside of it.
JSfiddle here.
.preview {
width: 300px;
border: 1px solid red;
vertical-align: top;
height: auto;
overflow: auto;
}
.title {
width: 50%;
background-color: olive;
float: right;
}
.tileImage {
width: 50%;
background-color: orange;
float: left;
}
Instead of using display:inline-block use, float:left for both divs.
http://jsfiddle.net/SFDPe/3/
Take a look onto this article:
Fighting the Space Between Inline Block Elements
Maybe you can use float: left; instead? Like this:
.preview, .preview div {
float: left;
}
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;
}