Say I have a menu bar at the top of my webpage.
Each menu item is in its own DIV, and these are laid out horizontally, with each menu item DIV side-by-side.
Now, as you shrink the width of the browser, there comes a point where the browser width will be less than the width of this menu bar.
What I'd like to do is to have the very last menu item (DIV) move down to the next line when this happens, and each consecutive last menu item do the same as the width of the browser continues to shrink, until all the menu items end up stacked from top to bottom.
I'm not sure how to do this using CSS.
Any suggestions?
Thanks.
html:
<div id="container">
<ul>
<li>
Menu1
</li>
<li>
Menu2
</li>
<li>
Menu3
</li>
<li>
Menu4
</li>
<li>
Menu5
</li>
</ul>
</div>
css:
#container{
width:100%;
min-width:200px;
background-color:green;
}
#container ul li{
width:50px;
height:22px;
background-color:red;
border:1px solid black;
list-style:none;
text-align:center;
display:inline-block;
}
demo:
http://jsfiddle.net/jU44m/
To accomplish this, All of the menu items should be in one larger div, and to make this div resize when the page is resized, set its width value to a percentage. Set the height value of this div to auto so that it will expand when the items fall down (sizing can be done with padding) like this:
#menu {
width: 50%;
height: auto;
}
Related
I want to build a page, where a certain DIV element in the middle of the page is horizontally scrollable (big width + overflow-x: scroll). The scrollbar will show up at the bottom of this DIV.
Is it possible to show a scrollbar at the very bottom of the page (so not at the bottom of the div) which only scrolls the content in that scrollable DIV in the middle of the page?
I ask this question, because I want to place content underneath the scrollable DIV, and I want the user to be able to scroll the horizontal DIV with a scrollbar that is places underneath this content.
<body>
<div id="wrap">
<div class="slider">
# Slider content here
</div>
<ul class="job_listings scrollable">
<li>job 1</li>
<li>job 2</li>
<li>job 3</li>
<li>job 4</li>
</ul>
<div class="about us">
# About us content here
</div>
** here I want the scrollbar of the ul job_listings to appear, at the very bottom of the page **
</div>
</body>
You are able to achieve this by adding position: fixed; to the non-scrollable content.
.slider {
position: fixed;
top: 0; // Assuming you want this to be on top
}
.about_us {
position: fixed;
bottom: 0; // Assuming you want this to be on the bottom
}
JSFiddle demo
Use padding-bottom:180px like i did here http://jsfiddle.net/v6ohjw32/
and remove border:2px solid green; to eliminate borders
I have a responsive top bar menu. On the left I have 2 buttons in a <ul> element with float:left. On the right I have another <ul> element with a float:right align.
In the middle of the two lists, I have one <p> element that receives dynamic text.
This works on large screens, but in the small devices the last <ul> goes to down.
JSfiddle: http://jsfiddle.net/49zjn/1/
Resize the Result panel to view my problem.
Any ideas of how to solve this?
Thanks
Instead of
#right { float:right; }
Try
#right { position:absolute; top:0; right:0 }
What is the behavior that you would like? Do you want the status to resize or be the first to drop down to the next line?
The following will make the status drop down first...it's all about the order of your elements.
#left { float:left; }
#left li { display:inline-block; }
#right { float:right; }
#status { overflow: hidden; float:left; }
li, p { padding:5px; border: 1px solid #000; }
<div id="bar">
<ul id="left">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul id="right">
<li>Item 3</li>
</ul>
<p id="status">Some long dynamic text here with system status</p>
</div>
Give more specifics on what you'd like (if this isn't it) and I'll take another crack at it.
Good luck!
the following is my menu structure:
<ul>
<li> menu 1</li>
<li> menu 2<br/> description</li>
<li> menu 3</li>
<li> menu 4</li>
</ul>
as you noticed the second menu have a height different than other siblings cause of it's content
so take alook at the css
ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap;
}
ul>li{
background-color:blue;
border:2px solid red;
}
this will display ul as a menu with items side by side in the center of the containing parent "ul" but unfortunately with different height
so how i can make children have the 100% of their parent using flexbox without adding custom height in pixel?
Put an align-self: stretch on the ul>li.
Check out the sample : http://cssdeck.com/labs/full/nttaiab7/
I am having issues to expand the div naturally like this:
I am not allowed to use percentages. I have tried to use them, but as soon as other items go between them, the second block goes down.
HTML code:
<div class="block1">
<ul>
<li>item long</li>
<li>item small</li>
<li>item sample</li>
</ul>
</div>
<div class="block2">
<a>This is a nice sample text</a>
</div>
CSS code:
.block2{
float:left;
border:1px solid blue;
}
.block1{
float:left;
border:1px solid red;
}
Here is my Fiddle
Replace float:left by overflow:hidden in .block2.
Fiddle
overflow:hidden is a little trick to trigger block formatting layout, so that the .block2 div sits at the side of the floated div. You can read more about block formatting contexts in this YUI article.
Lalalal, I am going insane with the CSS...
I can't achieve the simplest layout here, something is breaking.
I want 2 columns next to each other:
[**** 300px ****][******** 500 px ********]
2nd column heading
Some text.. - 1st bullet point text
- 2nd bullet...
- 3rd...
-------------------------
I have these divs:
<div class="faq_item">
<div class="faq_link">
Video/screenshot coming soon..
</div>
<div>
<strong>Q: How to add an item to a group? </strong>
<ul>
<li> Place your finger on one of the four icons at the bottom toolbar.</li>
<li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
<li> Release your finger.</li>
<li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
</ul>
</div>
<hr/>
</div>
And the CSS:
.faq_item strong {
display:block;
margin-bottom: 10px;
}
.faq_item span {
display: block;
}
.faq_item {
margin:0 0 30px 50px;
}
.faq_item div {
display:inline-block;
}
.faq_link {
width:300px;
}
div.faq_item hr {
width:500px;
float:right;
clear:left;
}
My problem is that 1st div inside sits on top of the 2nd div when the code is at it is now. Once I eliminate the longest "li" tags, the whole div aligns properly (2 divs inside are next to each other). I don't understand why don't "li" wraps as it should normally and with 2 divs as inline-block they should be next to each other and not stacked vertically.
Please advise. Thank you!
Try putting your content inside a table.
It Worked for me.
Here's resource with perfect 2column CSS layout (and bunch others) Generally, you have to get floating right
Here you go:
<style type="text/css">
.wrapper {
width:800px;
margin:0;
padding:0;
}
.faq-link {
width:300px;
background:#DDD;
}
.faq-list {
width:500px;
}
.left {
float:left;
}
.right {
float:right;
}
</style>
<div class="wrapper">
<div class="left faq-link">
Video/screenshot coming soon..
</div>
<div class="right faq-list">
<strong>Q: How to add an item to a group? </strong>
<ul>
<li> Place your finger on one of the four icons at the bottom toolbar.</li>
<li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
<li> Release your finger.</li>
<li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
</ul>
</div>
</div>
There are a couple of traps here. Padding will screw everything up, so you have to account for it in the padded class (i.e. padding:0 10px; adds a total of 20 pixels to the width, so if .faq-link had padding:0 10px; declared, the width would be 280px). Also, anything placed below these floated columns will need the clear:both css property.
Another method would be to drop your 2 divs in a container, then use margin to position the text where needed.
Example:
<div class="faq_container">
<div class="faq_link">
...
</div>
<div class="faq_item">
...
</div>
</div>
with css:
.faq_container{
width:800px;
}
.faq_item{
width:800px;
margin: 0 0 30px 350px;
}
.faq_link {
width:300px;
float: left;
}
This simply means the content div ignores the link div to the left, with the added bonus, that if you need something else on the right hand side you can simply float it there and edit the margins of the conent div to allow it to fit.
I created a fiddle for this - http://jsfiddle.net/vJYxt/
Let me know if this works for you.