I am creating a wordpress site, using and modifying one of the available templates.
Currently all of the posts are 80% width of the page, one after another going down the page. But we would like the posts to be in boxes instead. This is all working fine, however, there is a slight problem with the response on browser resize / smaller screens.
I have 3 boxes, in a line left to right. When i resize the screen (change the width), the 3rd box drops down below the first (as expected) however if the second box is longer/higher/taller than the first, the the 3rd box drops all the way down to the bottom of the 2nd box, but on the first box's column.
Ive made a very, very simplified JSFiddle to show this,
http://jsfiddle.net/vux85/
Here is the code from above for if the jsfiddle isnt working..
CSS:
#ul1 {
width:100%;
background: red;
list-style:none;
}
.list_item {
width:100px;
float:left;
margin:15px;
background:green;
}
HTML:
<ul id="ul1">
<li class="list_item">This is small.</li>
<li class="list_item">This box is very very very very very very very very very big, bigger than the other two boxes because it just is. </li>
<li class="list_item">This one is medium sized, a bit of text in here</li>
</ul>
The result i would like is box 3 dropping below box 1, like it does, but all the way up to the bottom of box 1 (with some margin of course)
Thanks!
You might want to try this.
Hope this is what you were looking for.
Related
On my website, I have created a menu bar at the bottom. it is made from a div, with it's position:fixed. It auto expands in case of viewing on a mobile device, but my problem is that it covers up the content if it's height expands. My code looks something like the following, and I have a js-fiddle of my front website page so you can see exactly what I'm talking about.
div.navigation
{
position:fixed;
width:100%;
min-height:100px;
}
http://jsfiddle.net/dWU9P/
I would put this in a comment, but I need 50 rep :(
Play around with:
max-height:10%;
It will stop it from expanding too high, you'll have to get your menu items to accommodate less menu space in some situations.
I have a header with a small horizontal bar right underneath it that serves as the main navigation for my site. When the window is full sized it works perfectly. But if the window is resized even a little bit smaller, the right-most menu moves down to the next line, as you would expect any floated element to behave.
Question: How can I make it so the navigation bar always stays on one line, resizing appropriately to the window size? I've tried changing the lengths to percentages, though this often causes problems since there are many components to the CSS.
Here is all the relevant code: http://jsfiddle.net/HSVdg/1/
Here is what I think is the main culprit, though I could be wrong:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my question.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Any help would be immensely appreciated!
You can do this by using CSS display modes.
Just set the ul to have display:table
And the child list items to display: table-cell
The table cells will automatically adjust thir width to fill the parent table at any width.
You'll need to remove the explicit width from
<li>
and
<a>
to allow them to be automatic.
I've updated the fiddle for you: http://jsfiddle.net/HSVdg/13/
Hope this helps.
I have a UL that is centered properly in wide and narrow widths but breaks in the mid range. When it is wide everything fits nice, when the browser is narrow everything stacks nice, but when using a mid width, say 800px wide, the menu wraps to the next line, which works for now, but I would like to see if it was possible to center the second row of links. Here is a screenshot of how it looks on top (red circle), and what I want it to do on the bottom (green circle).
If you look at another thread, you will see kind of how my menu works right now in his example link. If you shrink the browser on his example you will notice the menu wraps and the second row is left aligned.
I would like to have the second row centered under the first row like in the picture above. Is this possible?
Here is the HTML:
<div id="navContainer"
<ul>
<li class="menu_home">Home</li>
<li class="menu_gallery squished">Gallery of Properties</li>
<li class="menu_service">Service Options</li>
<li class="menu_contact">Contact Us</li>
<li class="menu_test">Testing HotSpots</li>
</ul>
</div>
I don't think the CSS is needed since it isn't working like I want it to anyway (and it is spread out through about 38 different CSS files, everything is floating left, but I can add the css here if you think it might help, but I am willing to scrap everything anyway...)
Add
text-align:center;
to .nav ul in your Tinkerbin example.
or:
#navContainer ul {
text-align:center;
}
to your own css
I'm having a little trouble here. Designing a website where I wanted two equally-spaced bars on either side with an accent color, and the content in the center is in a 800px wide box with a white background. Basically, three columns with different colors. To do this I created a content div with margin-align:auto for left and right.
#container
{
height:500px;
width:800px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
}
So the problem I'm having is my content box is flush with the top of the browser window, but if the screen resolution is significantly high there's an empty space leftover from my content blocks not taking up enough space and the accent color shows below my content box. What would I have to do to make the content adjust itself to take up more space so this doesn't show through at the bottom?
Edit: try this http://i.stack.imgur.com/DuNXJ.jpg
Edit 2: Solved! Thanks to Blender, the link provided in comments to cssstickyfooter.com did the trick.
Here's the completed correct code, for anyone who stumbles across this and is interested.
Perhaps you should take a look at this: https://stackoverflow.com/a/8289963/1068386, think it might help you. A screenshot and more code would be helpfull in each case.
So I'm aware that this is a confusing question. Basically, I've got two divs at the top of the page that include navigation and a search bar.
I have a full container
#containPage
width:1000px;
margin:0 auto;
}
for the page that is fixed width. This doesn't end until the end, I think, and there are two smaller containers for a layout, both float right and left.
When I resize the page in a browser, the layout at the top moves and changes the positioning, which I don't want to happen.
Any ideas?
here is the link: it's being even screwier right now and has the navigation links way to the right, so maybe someone could help with that too.
http://www.sophisticatedmoose.com/nerdery/
Resizing horizontally in Chrome and Firefox for Mac. If you scroll to the right, I'm supposed to have a nav bar underneath the search page with home, about, news, and contact. Last I checked- and I'm clearing the cache - it was waaay off on the left along with the footer.
Working on an image. I need reputation 10 to put one in. I've got it though.
You have this odd construct in your CSS:
#containPage { /*page I am in you*/
width:223%;
margin:0 auto;
}
The margin setting is fine and sensible but the width is rather, um, strange. The #containPage element is, essentially, the entire page so it is naturally as wide as the browser window, then the 223% is applied and the page itself becomes more than twice as wide as the browser window. Then, all the block elements that are immediate children of #containPage will be over twice as wide as the window unless you specify or imply a width in some other way.
In particular, the #NavRRT element will be too wide and the menu inside #NavRRT will float to the right all the way out of the window and you'll have to scroll horizontally to see it. Similar positioning strangeness happens with #footer.
Start by getting rid of the width:223% on #containPage. The page looks fine in Safari and Chrome if I turn off just that single piece of CSS.
UPDATE: You might want to add another <div> inside #containPage, then add max-width, min-width, and margin: 0 auto to that to keep the main content centered and reasonably sized. Everything that is currently inside #containPage would go inside this new <div>. If you go with this approach then you probably won't need any CSS at all on #containPage, it would just need to be around to help center the "real" page.
You have to remove the margin-left from your nav LIs (it's inherited from li) and remove their widths.
#nav li { margin-left: 0; width: auto !important; }