I have the following li item:
<li>
<span style='float:left; background-color:red'>a</span>
<span style='float:left; background-color:green'>b</span>
</li>
I'd like the span on the right to fill whatever width is remaining in its parent li. Is there a way to do that?
Thanks
You don't want to float each of them left, only the first one, and then make the second one display in block mode:
<li>
<span style="float:left; background-color:red">a</span>
<span style="display: block; background-color:green">b</span>
</li>
Looked for the same solution, but found only this which worked great for me:
<li>
<span style='display: table-cell; background-color:red'>a</span>
<span style='display: table-cell; width: 100%; background-color:green'>b</span>
</li>
All you need is just using table-cell displaying and set filler span width to 100%. All other solutions I've tried didn't work for me as expected.
Don't float the second one, and make it display:block.
http://jsfiddle.net/ymAt5/
You can use the grid layout:
<li class="my-grid">
<span class="left">a</span>
<span class="right">b</span>
</li>
And the css :
.my-grid {
display: grid;
grid-template-columns: max-content auto;
}
.left{
background: red;
}
.right{
background: blue;
}
Play with the grid-template-columns property so it suits your needs.
https://jsfiddle.net/c9j3ok7u/
Related
I am starting my first project creating a website and I am getting some problems trying to set the width of a div. Somehow it is not taking 100% of the width available for that element.(i want them to display horizontally with equal space between them)
I can only get the three list item to be one next to the other at the begining(left) of his line
Thats the html:
.sort_buttons {display:inline-block;
width: 100%;
}
.sort_btn {display:inline-block;
margin:auto;
width:auto }
<ul class="sort_buttons">
<li class="sort_btn" type="button" name="button">size</li>
<li class="sort_btn" type="button" name="button">size</li>
<li class="sort_btn" type="button" name="button">size</li>
</ul>
Thanks in advance.
Where is the div? Do you mean the ul element?
If so, that in fact is 100% width.
If you mean you wish for the li's to be 100%, you simply have to use:
.sort_btn {
list-style: none;
}
Instead use display:inline-block; use display:flex to wrap div(in your case:sort_buttons)
.sort_buttons {display:flex;
width: 100%;
}
.sort_btn {
margin:auto;
width:auto }
<ul class="sort_buttons">
<li class="sort_btn" type="button" name="button">size</li>
<li class="sort_btn" type="button" name="button">size</li>
<li class="sort_btn" type="button" name="button">size</li>
</ul>
Updated to automatically adjust width of .sort_btn depending on the space available, and also have .sort_buttons fill the available space remaining on a line (i.e. if you wanted to another button or menu).
I think this is what you're aiming for.
.bar {
display: flex;
}
.sort_buttons {
display:flex;
flex: 1;
}
.sort_btn {
margin:auto;
width:auto
}
<div class="bar">
<div class="title">
Sort Options:
</div>
<div class="sort_buttons">
<div class="sort_btn">size</div>
<div class="sort_btn">size</div>
<div class="sort_btn">size</div>
</div>
</div>
Note: I would be displaying this page on my SharePoint 2010 site.
I am trying to use CSS table to display and following is my HTML code for it:
<div id="cr">
<ul class="contact-img">
<li><img src="Landing page/Contacts/CassWade.png"></li>
<li>Cass Wade<br/>Project Manager</li>
<li><img src="Landing page/Contacts/Meredith.png"></li>
<li>Meredith<br/>HR Head</li>
<li><img src="Landing page/Contacts/Simon.png"></li>
<li>Simon<br/>CEO</li>
<li><img src="Landing page/Contacts/Roger.png"></li>
<li>Roger<br/>Director</li>
<li><img src="Landing page/Contacts/Sharyl.png"></li>
<li>Sharyl<br/>Employee</li>
</ul>
<hr/>
</div>
Here is my CSS for the above page:
.contact-img{
position: relative;
list-style:none;
display:table;
border:none;
padding:none;
margin:none;
}
.contact-img li
{
display:table-cell;
padding:10px 10px 10px 10px;
vertical-align:middle;
margin-left: 25px;
}
I was trying to display these images and its corresponding name in tabular format. The problem with this table is that width of the cell is getting resized as per the content of the cell. However, i want to fix the table cell width (no restrictions on height). Also I want to restrict the number of columns to 4. Any more entries should go to next row.
Any help on how to achieve would be highly appreciated. Thanks in advance.
My solution uses flexbox CSS3 properties to allow the boxes to be aligned and to wrap if the window gets to small. If you don't want this additional responsive behavior, you can change the max-width for width which in any case limits the number element to 4 per line.
I had to add boxing (div) inside to fix the cell size.
HTML:
<ul class="container">
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=1"></div>
<div class="description"><div>Cass Wade<br/>Project Manager</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=2"></div>
<div class="description"><div>Meredith<br/>HR Head</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=3"></div>
<div class="description"><div>Simon<br/>CEO</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=4"></div>
<div class="description"><div>Roger<br/>Director</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=5"></div>
<div class="description"><div>Sharyl<br/>Employee</div></div>
</div>
</li>
</ul>
CSS:
.container {
list-style: none;
-webkit-padding-start: 0px; /* fixing Chrome auto style */
display: flex;
flex-wrap: wrap;
max-width: 800px; /* max 4 items of 200px width per line */
}
/* the content as a bloc */
.inside-container {
width: 200px;
height: 100px;
display: flex; /* makes the description to stay next to the image */
}
.inside-container div {
width: 100px;
height: 100px;
}
.inside-container div.description {
text-align: center;
}
.inside-container div.description div {
display:table-cell;
vertical-align: middle;
}
Hope it helps!
edit:
To center your text horizontally you need the container to have text-align: center;.
To center horizontally, you need to put your text in a <div> and add these properties display: table-cell; vertical-align: middle;. It's not as beautiful as I would like, but it works well!
I have an extremely nested, hierarchical, list (it contains biological data on ordering of species). See the example, where I selected only three of the possible 10 levels of nesting.
I'd like to display this list horizontally, as an organizational chart that has been rotated 90 degrees.
I can get the exact right lay-out when I apply a width to each and every child-ul. Fortunately, the tree is generated by JavaScript and applying inline styles is easy. (As such:)
<ul class="wrapper" style="width: 120px;">
However, I realy would like to get rid of these inline styles, because the whole management of the tree would become so much easier without them. (Consider the possibility of showing/hiding child levels or even removing complete levels of organisation)
As you can see in the fiddles, removing the inline styled width, doesn't work. Which is strange, because I've set a width for the label. How can I make the parent divs accommodate to width of the child elements, however deep they have been nested?
Here on stack overflow, several similar question have been asked. These suggest setting float: left and position:relative. But, too bad, it doens't work...
http://jsfiddle.net/ideogram/27kNA/5/ (without inline styles)
http://jsfiddle.net/ideogram/zFMyZ/2/ (with inline styles)
Basically, my question boils down to: in the following css/html, how do I get rid of the inline width while maintaining the desired lay-out?
<head>
<style type="text/css">
.label{
width: 120px;
text-align: center;
}
.wrapper{
display: inline-block;
vertical-align: middle;
padding-left: 0;
}
.label, .wrapper{
display: inline-block;
vertical-align: middle;
width: 110px;
}
.taxon{
display: inline-block;
overflow: hiden;
outline: 1px dotted #ddd;
margin: 5px 0;
text-align: left;
}
</style>
<ul class="wrapper" style="width: 360px;">
<li class="taxon ">
<div class="label">Balaenopteridae</div>
<ul class="wrapper" style="width: 240px;">
<li class="taxon ">
<div class="label">Balaenoptera</div>
<ul class="wrapper" style="width: 120px;">
<li class="taxon">
<div class="label">Balaenoptera acutorostrata</div>
</li>
<li class="taxon">
<div class="label">Balaenoptera borealis</div>
</li>
<li class="taxon">
<div class="label">Balaenoptera edeni</div>
</li>
</ul>
</li>
<li class="taxon">
<div class="label">Megaptera</div>
<ul class="wrapper" style="width: 120px;">
<li class="taxon">
<div class="label">Megaptera novaeangliae</div>
</li>
<li class="taxon">
<div class="label">Megaptera whatever</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Update your selectors as follows and remove any defined widths. The key point is display: table-cell et al of the same family.
Fiddle sample: http://jsfiddle.net/pLUns/
.label{
border-radius: $taxon-margin;
text-align: center;
}
.wrapper{
vertical-align: middle;
}
.label, .wrapper{
display: table-cell;
vertical-align: middle;
}
.taxon{
display: table-row;
overflow: hidden;
outline: 1px dotted #ddd;
text-align: left;
border-spacing: 5px;
}
The problem is that in HTML few things size to their contents. Most elements calculate their size based on the size of their parents.
The ones's that do size to their contents include (off the top of my head): tables, floated elements, absolutely/fixedly positioned elements. Perhaps there's something else too, but I don't remember it right now.
In your case I'd suggest using a javascript-generated table instead of a list. I know, I know - not semantic and all that. But the visual requirements are such that anything short of table or specific widths will fail.
That's because an element needs not only consider their own content size, but also the size of their siblings. After all, if there are 3 elements in your 2nd level, you'd want them all to be the same width, right?
If you have severe allergy against tables, you might be able to slip through with display: table-cell, though I don't know how you'd do the rowspans that you need.
<li>
<a href="viewBook.php?bookId=<?=$bookId?>">
<img style="float:left; clear:left; padding-left:10px; width:50px; height:75px;" src="http://dummyimage.com/50x75/000/fff" / >
<span style="line-height:75px; padding-left:5px; color:grey;"><?=$count?>.</span>
<span style=""><?=$title?></span>
</a>
</li>
because i wanted to make a large clickable anchor area, so i have to throw everything inside an anchor. problem is because my title may be multiple lines. how could i actually vertically align to center of the image and preventing the next line of title from going below of the image.
demo link: jsfiddle.net/9wJRG/3
You can drop the two span elements and replace them with a single span element like this:
<li>
<a href="viewBook.php?bookId=<?=$bookId?>">
<img src="http://dummyimage.com/50x75/000/fff"/>
<span id="text">
<?=$count?>. <?=$title?>
</span>
</a>
</li>
and then use the following CSS for that span:
#text {
display: table-cell;
width: 100px;
height: 75px;
padding: 10px;
vertical-align: middle;
}
Working example on jsFiddle.
Hope this helps !
So I have a bunch of elements that need to have a specific width, height and padding and need to be centered within their parent element:
<div class="pages">
<a>Page 1</a>
<a>Page 2</a>
<a>Page 3</a>
</div>
How do I do this? I don't know how many elements there will be so .pages can't have a defined width so margin:auto; won't work.
In the stylesheet or style tag:
margin-left: auto; margin-right: auto
You can wrap all those in one single div and center this one, this will be the usual approach I believe.
<div id="wrapper" style="margin-left:auto; margin-right:auto">
<div id="page1"> ... </div>
<div id="page1"> ... </div>
...
</div>
If you have working code, please post it.
It sounds like what you're looking for is margin: auto on the elements you want to center, like so:
#my_div {
margin: auto;
}
CSS CODE
div {
display:table-cell;
width: 200px;
height: 200px;
vertical-align:middle;
background: red;
}
HTML CODE
<div>
Hello...This is Vertically Centered!
</div>
<div>
Hello...2!
</div>
<div>
Hello...3!
</div>
SAMPLE DISPLAY