I'm trying to make a div with a static height and variable width. With multiple horizontal tabs. The active tab should stretch horizontally to fill the container and the inactive tabs should shrink back down to their inactive size (24px in this case).
I can't quite get it to work. The tab stretches, but too much. It bumps the tabs after it to the next line, which shoudn't happen. I can't figure out how to make this work like I want it to.
What I am trying to do can be seen at [link removed]
I'm sure that theres a way to do it, as I've seen it done before, but I can't find an example of it. Know what I'm doing wrong?
Are you looking for a horizontal accordion?
http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/
http://jqueryui.com/demos/accordion/#fillspace
There are several examples online. It may be best to rely on Javascript to do the calculating if you want the open tab to take up all the space MINUS the width of the tabs, of the container.
<style>
#navigation
{
border: 1px solid #000000;
height: 400px;
margin: 10px 25px;
padding: 0px;
width: auto;
}
.item
{
display: block;
float: left;
height: 100%;
margin: 0px;
overflow: hidden;
}
.item img { float: left; margin-right: 5px;}
.closed
{
width: 10%;
}
.open
{
width: 80%;
}
</style>
</head>
<body>
<div id="navigation">
<div class="item open">
<img src="hometab.png" alt="Home" />
Open Tab Open Tab
</div>
<div class="item closed">
<img src="hometab.png" alt="Home" />
Open Tab Open Tab
</div>
<div class="item closed">
<img src="hometab.png" alt="Home" />
Open Tab Open Tab
</div>
</div>
How committed are you to width:auto on #navigation?
If you set the width of #navigation to something fixed and also set appropriate width values for .open then it looks pretty good.
When I was playing with your example in FireBug I used 400 for #navigation and 350 for .open and it seems to work well.
The extra items are probably being bumped to the next line because the width of your open tab is 100% - try setting it to 80% or 90%, to leave room for the extra "tabs" after it. The "closed" tabs should probably also have a percent width, which should all add together to equal 100% - the full width of their container.
Following approach worked for me:
Let “w” be original width of the div and you want to stretch it by “x” pixels. Adding following CSS on it:
{
width: (w + x) px;
margin-left: -x/2 px
}
e.g. if original width is 300px and you want to stretch it by 50px, additional CSS will be:
{
width: 350px;
margin-left: -25px
}
Related
This is my first post, so please be gentle. I've searched thoroughly for an answer but had no luck - I'm sure it must be something simple but I'm running out of ideas...anyway:
I'm making a responsive site but there's an image that I want to keep at a fixed size. It took me ages to work out how to do this (by removing "max-width: 100%"), however this has had the bizarre effect of changing its alignment so it is no longer centred on the page.
How can I have both? Centred and a fixed size?
Any help much appreciated.
Oh and this is what my image css is looking like at the moment:
img {
height: auto;
min-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
Thanks for all your help so far - although this is still far from resolved I'm afraid. Figured I'd show my code in full as some of you have suggested, so I put it into jsfiddle. However it works absolutely fine there - the window can be resized with the image still retaining it's full dimensions and still remaining in the centre of the page. Yet with exactly the same code, when I load the 'index' page from my PC into Chrome, the image at the bottom either retains its size but drifts to the right when the window is shrunk, or it stays in the centre but shrinks to a ridiculous size. Any idea why there might be such a discrepancy?
Here's my jsfiddle anyway, which might have some clues:
http://jsfiddle.net/eggwhite/0yz6ndjh/
Thanks again.
If I understand you right, you want to add an image which should still be centered even if the parent element's width is smaller than the image. This could be done by using an image wrapper div which is pretty wide and position it accordingly. Also, the image itself should be centered in that wrapper.
In the following example, the layout has two columns, each with an image of 300x300px. If you resize the viewport (use the "Full page" view mode), the images will still be centered (see how the "x" in the placeholder images stays visible).
html, body, .column {
padding: 0;
margin: 0;
}
.column {
display: block;
float: left;
width: 50vw;
height: 100vh;
background-color: #ccf;
overflow: hidden;
}
.column + .column {
background-color: #ffc;
float: right;
}
.img-wrapper {
width: 10000px;
margin-left: calc(-5000px + 50%);
text-align: center;
}
.img-wrapper img {
margin: 0 auto;
}
<div class="column">
Column 1
<div class="img-wrapper">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="column">
Column 2
<div class="img-wrapper">
<img src="http://placehold.it/300x300" />
</div>
</div>
Can be done by wrapping the image in a <div> like so:
HTML:
<div>
<img src="..." alt="random blue sky image" />
</div>
CSS:
div {
width: 100%;
text-align: center;
}
img {
width: 250px; /* or whatever width you need the image to be */
}
Here's a demo of the code.
If that didn't help, we'll ask that you present us with the problematic code. Jsfiddle.net is an easy way to do that.
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
It's kinda hard for me to explain the problem, so let me give you the URL.
Visit http://www.ucaftercruz.com
If you look at the footer, theres an unordered list aligned vertically. When you drag the browser and make it smaller, the list goes from one line to two lines. How do I make it so that it stays in one line and in the center of the footer regardless of window size?
I suspect it has something to do with my divs.
Here is my html code:
<div style="clear:both;">
<div id="footer">
<div id="footer-pages">
<ul>
<li>About the blog</li><span></span>
<li>The Authors</li><span></span>
<li>Archives</li><span></span>
<li>Credits</li><span></span>
<li>FAQ</li>
</ul>
</div>
And here is my CSS:
#footer {
height: 100px;
background-color: #d0cabc;
font-size: 12px;
}
#footer a {
color: #606060;
}
#footer-pages {
padding: 20px 0;
border: 0px solid green;
margin: 0 auto;
width: 35%;
}
#footer li {
display: inline-block;
margin: 0 15px;
}
In order to make it so that the menu can be dynamically added to, you should make the container width (#footer-pages) to be a fairly wide div, and center the contents. I used the following code via the inspector:
#footer-pages {
width: 100%;
text-align: center;
min-width: 500px;
}
add #footer { white-space: nowrap } to your css for footer. You could also add min-width:###px where ### is big enough.
In the first case, you tell the rendering engine to avoid making the box any smaller than the minimum required to contain the text. I actually don't know for sure if this will work on this kind of list.
In the second case, which I know works, but is a little less elegant, will force the engine to keep the layout box no smaller than a specific amount -- if you choose an amount that will contain the text, it may add scrollbars (which you can control with the overflow property) but not cause the text to wrap.
I need to do a website with divs. See the code snippet for the format. The MENU is of variable height, depending if the menu-items is rolled out or not, and the content is of variable height as well, but with a minimum of 700px. If the MENU is folded together to its min-height, it is 300px, and the BOX should take up the remaining space so MENU+BOX is the same height as the CONTENT. The content of BOX is 600px, so when BOX only gets 400px, there should be scrollbars. When the CONTENT div expands, the BOX should expand as well, so they stay the same height.
Here's what i got so far, but it is not working properly. I've tried some other stuff, but deleted it for this post so I only get the points shown instead. Hope you can help, and thank you in advance!
#container{ width: 800px; }
#leftbar{ float: left; width: 250px; background-color: lightgray; }
#content { float: left; width: 550px; background-color: white; }
#menu { width: 250px; }
#box { width: 250px; height: 300px; overflow-y: scroll; }
<div id="container">
<div id="leftbar">
<div id="menu">
<div id="box">
</div>
<div id="content"></div>
</div>
<div style="clear:both;"></div>
hi at the first look i can see you have some unclosed div tags, and probably that's why it doesn't do what you want. You can assign scroll bars by using java script, if you set overflow from the css it will have a scroll bar from the beginning
Can two floats be side by side no matter what the width is?
basically I have this below:
#container { height: 100%; width: 100%; overflow: auto; background-color: #F6F9FF; }
#navigation { height: 100%; width: 300px; float: left; overflow: auto; background-color: green;}
#content { float: left; background-color: blue;}
<div id="container">
<div id="navigation">
<ul>
<li>1. nav stuff </li>
<li>1. nav stuff </li>
<li>1. nav stuff </li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum snip....ultricies.</p>
</div>
<div>
I want the navigation and the content to always be side by side. The navigation has an initial width of 300px, however you can close it using jquery and then it only takes up 15pxs. I want the content to always fill the remaining portion of the container. Right now I keep getting it so when the width gets small, the content gets bumped down below the navigation.
Here is a link to jsfiddle to help show what i'm talking about.
http://jsfiddle.net/M9sZd/2/
This is very generic. There are many ways to achieve this, and I'll tell you how I'd do it (with JavaScript, of course). There are two situation: 1. nav extended and 2. nav collapsed. I'd use position: absolute for the navigation, and the corresponding width, while having a padding on the container to accommodate the width of the navigation, and add a class to the container depending on the situation.
#navigation { position: absolute; left: 0; top: 0; width: 300px; }
#navigation.collapsed { width: 15px; }
#container { position: relative; padding-left: 300px;}
#container.nav-collapsed { padding-left: 15px; }
The only risk is that the navigation is higher than the content, and will get trimmed. You can prevent that by using a min-height on the container.
Side by side floating can be tricky sometimes depending on the browser. (I have found issues with IE and using up 100%)
I changed the navigation and content areas to use %-based widths - (20%/80%) and that seemed to easily fit them next to each other.
Link with %-Based Widths
Have you considered using something like a "splitter" to separate the content and navigation and make them adjustable?
jQuery Splitter
I used something like that recently and it really worked for what I was trying to accomplish. You could possibly adjust the widths of the areas explicitly - when you alter the navigation width with something similar to below:
var containerWidth = $("#container").width();
onChange()
{
$("#navigation").css("width", 15px);
$('#content").css("width", containerWidth - 15);
}
Pardon the pseudo-code, it was off the cuff.
Anyways - I hope something here you were able to use :)