I'm trying to recreate the navigation bar on the Forbes website:
link here
The buttons in the navigation bar resize themselves to always cover 100% of the window width.
The way I've tried this is by setting a min and max width for my header tag and a min and max width for each button on my bar:
header {
min-width: 800px;
max-width: 100%;
background-color: gray;
}
header #Title {
min-width: 200px;
max-width: 200px;
background-color: blue;
}
header #ButtonA {
min-width: 120px;
max-width: 200px;
background-color: blue;
}
header #ButtonB {
min-width: 120px;
max-width: 200px;
background-color: blue;
}
The header is resizing fine between the min and max widths. However the width of my buttons is not changing at all. They are fixed width no matter how large my current window is.
By setting min- and max-widths, you are only setting limits to what widths the buttons can't exceed. Try making the button elements block-level ("display: block;") so that they naturally would span 100% of their parent container, but don't because of your min- and max-width limits.
Alternatively (and my preferred option), instead of setting min- and max-widths, set the width of each element to be percentages. For example (change the widths for your design):
header #Title {
width: 40%;
}
header #ButtonA,
header #ButtonB {
width: 30%;
}
Percentage widths are based on the width of the parent container. In this case, you want the buttons to be a percentage of your full width header, so the solution is to set your buttons' width percentage as a percentage of the full width. For example, if you have 5 buttons, then the width of each would be 20% (1/5th of 100%).
Here is a CodePen with an example of this: http://www.codepen.io/kyleatfine/pen/okxcz
You might also consider using a Flexbox layout to accomplish this as well. http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I'm using vh to set height of divs and vw to set their width.
Is there any way to prevent a DIV from becoming too small when resizing the browser window using pure HTML and CSS only?
You could do that in css:
div {
min-width: 200px; /*Says that the every div has at least to be 200px width*/
min-height: 200px; /*Says that the every div has at least to be 200px height*/
}
<div id='minWidth'></div>
#minWidth{
min-width: 200px;
}
For more information check out:
http://www.w3schools.com/cssref/pr_dim_min-width.asp
this can also be set for height
#minHeight{
min-height: 200px;
}
I made a simple two-column fluid layout using Bootstrap 2. One column contains two div, and the other contains three div. Both columns are of span6. The fiddle is here.
I attempted to adjust the heights of the two divs in the left column using CSS, so that the top one occupies 62.5% of the browser window height, while the bottom one occupies the rest 37.5%. And similarly for the three divs in the right column. But there are a few questions/problems:
The heights of the blocks/divs do not fill up the window vertically, and the height of each block/div is not changed.
How to make the total height of the two divs on the left equal to that of the three divs on the right, while respecting the relative height ratio within each column (left: 62.5%, 37.5%; right: 35%, 30%, 35%)
How to adjust the paddings between blocks/divs?
I hope all of these can be achieved without any Javascript.
I've tried something, I hope that helps you. So, answers are:
Height of each BlocX div is not changed because you didn't set height of body. In tour case, body have auto height, given by elements inside of body.
Look below.
Those "paddings" are actually margins in class .well. So, avoid that class or override settings.
Finally, we have code like this:
HTML:
Removed class .well, everything else is the same.
CSS:
html{height:100%;}
.body-background {
padding-top: 10px;
background-color: #D1D1D1;
height:100%;
}
.container-fluid, .row-fluid, .span6
{
height:100%;
}
#A-b {
min-height: 62.5%;
height: 62.5%;
background-color: #FFE0C2;
}
#B-b {
min-height: 37.5%;
height: 37.5%;
background-color: #4D4D4D;
}
#C-b {
min-height: 35%;
height: 35%;
background-color: #969696;
}
#D-b {
min-height: 30%;
height: 30%;
background-color: #57BCFF;
}
#E-b {
min-height: 35%;
height: 35%;
background-color: #183547;
}
We give to html and body elements height:100%; and after that do the same to .container-fluid, .row-fluid and .span6. Now we have result like this in DEMO.
NOTE: In resolutions smaller than 768px, use media queries to set height of BlockX and all other elements. Also, don't set height directly on span6, row-fluid etc. This is just example. In live site, use some classes to override classes in bootstrap.
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer
I have a website with two columns, within a wrapper div.
The wrapper has the same height as the tallest div by giving floating everything and giving the wrapper height:100%.
Here's my problem: one of the columns is a div with overflow:scroll and several images in it. I tried to set its height to 100%, thinking that it would take up the full height of the wrapper. Instead, it became the height of all the images on top of each other.
If I set the height of the column with images (#rightbox) to a specific height in pixels, this happens.
I want it to have the same height as the other div with text, so I set its height to 100%. Then this happens.
How can I make the two columns have the same height?
EDIT: I forgot to mention that the amount of text varies, so I can't define a specific height for the wrapper.
You cannot define height as 100% unless your parents provides an actual heights.
#wrapper {
height: 800px;
}
/* Now you can make the columns inside take the full height of its parent *?
#wrapper .columns {
height: 100%;
overflow: auto;
}
Note: if the wrapper sits inside the body element then you will need to set html,body { height: 100%; } before the wrapper can be set to 100%
Given the limited amount of code provided... here is a pure css solution.
http://jsfiddle.net/rlemon/Q7MvS/
.wrapper {
height: 600px;
width: 800px;
}
.panel {
float: left;
width: 400px;
height: 100%;
}
.panel.right {
overflow: scroll;
}