I have the following html:
<div id="container">
<ul>
<li>element 1</li>
<li>element 2</li>
</ul>
</div>
applied with a css as follows:
#container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }
So now I would like to have an indeterminate number of elements (<li>) all with 100% width (so they can adjust accordingly to the browser's window size) but all side by side, displaying the horizontal scroll bar in the container.
I have tried putting "display:inline" on ul's css, and "float:left" on li's css, but with no success.
Any suggestions?
Also, try to consider I'm trying to make this as "cross-browser compatible" as possible.
Thanks in advance.
Like the others I'm struggling to understand what you're looking for exactly but does this do what you want?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizontal 100% LIs</title>
<style type="text/css">
#container { width:100%; overflow:auto;}
#container ul { padding:0; margin:0; white-space:nowrap; }
#container li { width: 100%; list-style-type:none; display:inline-block; }
* html #container li { display:inline; } /* IE6 hack */
* html #container { padding-bottom:17px;} /* IE6 hack */
*:first-child+html #container li { display:inline; } /* IE7 hack */
*:first-child+html #container { padding-bottom:17px; overflow-y:hidden; } /* IE7 hack */
</style>
</head>
<body>
<div id="container">
<ul>
<li style="background-color:red">element 1</li><li style="background-color:green">element 2</li><li style="background-color:blue">element 3</li>
</ul>
</div>
</body>
</html>
Getting the LIs on to one line has two parts. The white-space:nowrap on the ul stops any automatic wrapping and the display:inline-block on the LIs allows them to run one after another, but have widths, paddings and margins set on them. For standards compliant browsers that's sufficient.
However IE6 and IE7 need special treatment. They don't support the display:inline-block properly, but fortunately display:inline on elements with hasLayout set gives a behaviour very like display:inline-block. The width:100% has already forced hasLayout to be set on the LIs so all we have to do is to direct the display:inline to IE6 and IE7 only. There are a number of ways of doing this (conditional comments are popular on StackOverflow) but here I've chosen the * html and *:first-child+html hacks to do the job.
Additionally, IE6 and IE7 have another bug where the scroll bar overlays the content, so the container is given a padding-bottom to make space for the scroll bar. The scroll bar is a platform control, so its height cannot be known exactly, but 17 pixels seems to work for most cases.
Finally, IE7 also wants to put in a vertical scroll bar, so the overflow-y:hidden directed at IE7 stops this from happening.
(The padding:0, margin:0, list-style:none, and the styles on the individual LIs are just there to show more clearly what's happening.)
You want it to act like a good old fashioned table:
<ul class="menu">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
.menu {
display: table;
width: 100%;
}
.menu li {
display: table-cell;
padding: 2px;
background: #900990;
border: 1px solid yellow;
color: white;
}
then you can also collapse it nicely when the page is small:
/* responsive smaller screen turn into a vertical stacked menu */
#media (max-width: 480px) {
.menu, .menu li {
display: normal;
}
}
What you're trying to do resembles what table cells do and is impossible otherwise, without using JavaScript (I don't suggest using tables or JavaScript for this, however). Your best bet is to set a certain amount of horizontal padding on the <li> tags and float them so that they are auto-width based on their content's width instead of the window's width:
<div id="container">
<ul>
<li>element 1</li>
<li>element 2</li>
</ul>
</div>
<style type="text/css">
#container, #container ul {
width: 100%;
float: left;
}
#container ul li {
margin: 0 10px 0 0;
padding: 5px 10px;
float: left;
}
</style>
The other method is to use display: inline-block; to achieve what you want, but it's kind of a hack (not cross-browser compatible).
using jquery to space your li's after your page has
var ul = $('#yourListId');
var numChildren = ul.children().length;
if(numChildren <= 0){
return;
}
ul.css({'list-style':'none','margin':0,'padding':0});
var parentWidth = ul.width();
var childWidth = parentWidth/numChildren;
ul.children().each(function(index, value){
$(this).css({'width':childWidth,'margin':0,'float':'left','display':'inline-block'});
});
ul.after('<div style="clear:both">');
With the exception of the "childWidth" css... you can, of course, replace the other css with something from a style sheet.
Generally to show li's horizontally you would float them all left. The part that confuses me is the 100% width. How can each li have 100% width when they can only be as wide as their container? It seems like the li's need to be fixed width or autosized with no width at all.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { float:left; }
</style>
</head>
<body>
<div id="container">
<ul>
<li>element 1</li>
<li>element 2</li>
</ul>
</div>
</body>
</html>
I think that what you want to do is not possible in cross-browser css and html; if you set the width of the li to 100%, you set it to the width of its parent element and what you really need is for the parent element (the ul) to have the width of all li's combined. And you cannot set the width to x-times the screen width using just css.
And even if you could, it would also grow the li's as the are told to be 100% of its parent element. Sort of a chicken and egg problem for the browser.
In javascript is's easy though, just calculate the number of li's, set their width to the screen width and set the ul width to (the number of li's) x (screen width).
Try this
<div id="container">
<ul>
<li>element 1</li>
<li>element 2</li>
</ul>
</div>
#container { width:100%; }
#container ul { text-align:center; }
#container li { display:inline; text-align:center;padding-left:20px; padding-right:20px; }
Related
i am pulling data from database that prints in a ul li format. since data is different we may have 2 li items or we may have 10 who knows.
what is the best approach to center a ul or a div that will change in width? i know to center a div or ul i would use following:
#name, ul {
width:200px; /*set certain width */
margin:0 auto; /* center div */
display:block /* play friendly with the existing layout */
}
my problem is with the data the div may be 200px or beyond 200px, and as a result it would not truly be centered, since the div center alignment is based on width.
any help would be appreciated.
Here, is a way you can center a ul that has dynamic content length.
You can wrap the ul in a div and set the CSS property on the DIV as
.wrapper{
display:table;
margin: 0 auto;
}
This will center align the ul inside the div irrespective of the width of the div, you can see an example below:
Codepen Link http://codepen.io/nadirlaskar/pen/RKbBpM
.wrapper{
display:table;
margin: 0 auto;
background-color:yellow;
}
ul{
background-color:red;
}
li{
background-color:blue;
}
<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2 is now large</li>
</ul>
</div>
#headermenu ul li {
width:195px;
height:45px;
float:left;
left:0;
text-decoration:none;
text-align:center;
font-family:century gothic;
background-color:#fef3e2;
}
this is my li css ive been trying to make the width and height to a certain percent but apparently its not working..my question is, is there a way or is it possible to set this width and height to percent i dont want to use table here because if i do the submenu when hover in the menu will be distorted meaning they will be side by side not on top of each other(i want them to be on top of each other)..any idea is appreciated..
UPDATE:
http://jsfiddle.net/guradio/gvmRX/
in this fidde you can see that i change the li size to 100 to make it fit in the this is the reason why i want to make it a percent width if possible to avoid over sized width
To be able to give a height and width in a percentage you need to give the parent the width and height.
HTML:
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
CSS:
ul li {
width: 33%;
height: 33%;
float:left;
left:0;
text-decoration:none;
text-align:center;
font-family:century gothic;
background-color:#fef3e2;
}
In this demo we have the <li> you can see it is using a width as percentage as the parent has already a set width (<ul> is a block element) but the height is not set already so the percentage height it not working.
Demo Here
Now lets set the parents height and see if it changes anything.
Added CSS:
html, body {
height: 100%;
}
ul {
height: 100%;
}
so here we are setting the html, body height to use 100% and then the the parent of <li> needs to also be set (again <ul> is a block element, so it has no set height). This allows us to use percentages for the height.
Demo Here
Any question let me know.
This is the structure of a page.
the height of header, menu and footer is known (fixed and set by pixels) but the body height is not. but I want it to be so height such that the site completely covers the screen vertically. I mean I need to set a min-height for the body that causes the page fits the screen. how can I do that?
Found it. I should set the display of the site wrapper DIV to table and its height to 100% and every first level DIV display must be table-row.
There are a few ways now with flex-box or calc() - but I have a feeling you aren't going to go that route at this time. Here is the best alternative.
The concept is that you have a master container around everything but the footer. You force this to be 100% of the page, but they your footer isn't above the fold. To correct this you can make a negative margin on your master-container, but then that has it's own issues too - and so you add this buffer div that matches the footer height - (and the negative margin of the master-container) This allows the page to fill to the footer, but if the page is longer, gently push the footer down.
Some people will say it's too "hacky," and those people don't seem to stay in this business very long. Of course, your theme is going to have a ton of styles that might conflict with this or mess it up - so watch out for those, and really understand what is happening - so you can adjust for conflicts. It's simple in theory, but anyone who ever built a website has fought this issue. Flex-box offers an incredibly easy solution, but it's hard to implement at the time of this post because of cross-browser compatibility.
Here is a jsFiddle with just the most basic code.
Here is a CodePen with a more extensive example
HTML
<div class="container master-container">
<header class="container global-header">
header
</header>
<nav class="container global-nav">
<ul class="menu">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</nav>
<section class="container main-content">
main-content
</section>
<div class="container footer-buffer"><!-- empty --></div>
</div>
<footer class="container global-footer">
footer
</footer>
CSS
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/*
Read about it...
http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html, body {
height: 100%; /* let them know they can be this tall if they want - because they don't already know for some reason... */
}
body {
margin: 0;
}
.master-container {
min-height: 100%; /* force height of html and body */
margin-bottom: -79px; /* opposite of footer buffer! */
}
.container { /* what is common to all the big blocks */
width: 100%;
float: left;
}
.global-header {
height: 91px;
background: lightblue;
}
.global-nav .menu {
list-style: none;
margin: 0; padding: 0;
}
.menu li {
float: left;
margin-right: 1em;
}
.main-content {
/* ? */
}
.global-footer, .footer-buffer {
height: 79px;
}
.global-footer {
background: pink;
}
Use the following via onload:
//You will need to define the header height, footer height and menu height as vars:
function bodyHeight() {
var headerHeight, footerHeight, menuHeight;
var scr = screen.availHeight;
var setBodyHeight = scr - (headerHeight + footerHeight + menuHeight);
document.body.style.height = setBodyHeight + 'px';
}
Is it u need ?
updated: http://jsfiddle.net/RQFg3/2/
setting the parent element of body (html) as height 100% and body as well.
CSS
* {
padding:0;
border:0;
margin:0;
}
html, body {
height:100%;
width:100%;
}
body {
border:1px solid red;
}
There's a better way to do it, but here's a quick and dirty example:
http://cdpn.io/uzbdg
I have a container div that contains 2 children divs: the first one, stick to his father's left border, contains a list of buttons while the second one contains the content. Long story short, it works like a tab navigator, with the buttons on the left.
The problem I have is with the buttons container height, that I'd like it to be 100% of his parent div. I don't want to give a fixed height to the container div, because I want the container to change accordingly to his content height..
As you can see in the fiddle below, the ul right border is not touching the container bottom edge..
here's some code
HTML
<div id="container">
<div id="buttons">
<ul>
<li>button 1</li>
<li>button 2</li>
<li>button 3</li>
<li>button 4</li>
</ul>
</div>
<div id="content">
asdasdasdasdas<br>
...
asdasdasdasdas<br>
</div>
</div>
CSS
#buttons{
background: lightgray;
width: 150px;
float: left;
border-right: 1px solid black;
height: 100%
}
#content{
padding: 15px;
float: left;
}
#container{
/*-- adding fixed height here, works*/
/*height: 300px;*/
display: inline-block;
border-left: 1px solid black;
}
FIDDLE
what I've currently done -->http://jsfiddle.net/BeNdErR/kVcds/
the result I'd like to achieve, without the fixed height --> http://jsfiddle.net/BeNdErR/kVcds/2/
another case that I'd like to be covered: content shorter than the buttons div --> http://jsfiddle.net/BeNdErR/kVcds/8/
Any idea or solution to this problem?
Thanks in advance, best regards
You can do this by using absolutely positioning the #buttons div within the parent.
For this, first declare relative positioning on the parent
#container {
position:relative;
min-height:200px;/* if you can reliably set a minimum height */
}
#buttons {
position:absolute;
height:100%;
width:150px;
}
#content {
margin-left:150px;
}
Because the absolutely positioned button elements are now out of the page flow, you can add a margin equal to the width of the #buttons div to the #content div so that it still is in the right place.
See the updated fiddle:
http://jsfiddle.net/kVcds/3/
You might want to refer to this links. It will likely get you what you want, but it's not as simple as you would have probably have wanted it.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Hope this helps!
How to size a div's height to its container height, using CSS ?
<div class='container'><br>
<div style='display: block; height: 500px'>left</div><br>
<div id='to-be-sized' >right</div><br>
</div>
You can either:
use the incomplete but philosophically correct path of pure CSS and face every kind of incompatibility between browsers
or
write 3 lines of dirty semantically incorrect and devil made table and have it work perfectly everywhere
Your pick :)
There's a way to do this IF you happen to be using jQuery. As you asked for CSS this might not be an option available to you, but if you can utilise it it will do exactly what you want.
$(divToResize).css('height',$(container).innerHeight());
$(divToResize) is the selector for the DIV you wish to match the height of it's container and $(container) is logically the container whose height you want to get.
This will work regardless of if the container's height is specified in CSS or not.
I know this was answered forever ago, but when I run into this issue nowadays, I use Flex Box. It's awesome. See A Complete Guide to Flexbox by Chris Coyier
.parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
.child {
flex-grow: 1;
}
.child1 {
min-height: 200px;
background-color: #fee;
}
.child2 {
background-color:#eef;
}
<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
If my understanding is correct and the default height of a div where no height is specified is auto then this is not possible without setting an explicit height on the containing div. If an explicit height is set on the containing div then height:100% on the contained div will mean that it grows to the height of the container.
It seems like you are trying to get equal height columns. You could use the fauxcolumns method where a background image is used to fake the equal height. There are other methods out there.
You can tell the container div to display as table and have the inner div to display as a table cell.
The HTML
<body>
<div id="wrap">
<div id="header">
<h1>
My Header</h1>
</div>
<div id="main">
<ul id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="primaryContent">
</div>
</div>
<div id="footer">
<h1>
My Footer</h1>
</div>
</div>
The CSS
#wrap
{
width: 800px;
margin: auto;
}
#header
{
background: red;
}
#main
{
display: table;
}
#nav
{
background: gray;
width: 150px;
display: table-cell;
}
#primaryContent
{
background: yellow;
padding: 0 .5em;
display: table-cell;
}
Fixes for IE
#wrap
{
width: 800px;
margin: auto;
}
#header, #footer
{
background: red;
}
#main
{
background: url(../bg.png) repeat-y;
}
#nav
{
background: gray;
width: 150px;
float: left;
}
#primaryContent
{
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
It's a tricky thing to do--there's no clear-cut best approach, but there are a few common ones.
If we assume that what you REALLY need is for the height of the right column to be (or appear to be) equivalent to the height of the left column, you can use any of the techniques frequently used to get equal height columns. This piece contains a few tricks to get the right look and behavior. I recommend reading it to see if it solves your problem.
The other approach uses Javascript to determine the height of the container, and setting your right-hand column to that. That technique has been discussed on SO here. As long as your container's size is not the only thing determining the size of your outer container, that should be a valid approach (if that's not the case, you'll have a chicken-egg problem that could cause weird behavior).
Sample code, you need to start from the html element so you can make use of the flexible height in the containers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Test</title>
<style type="text/css">
html, body, #inner { height: 100% }
#inner { border: 4px blue solid }
#container { height: 200px; border: 4px red solid }
</style>
</head>
<body>
<div id="container">
<div id="inner">
lorem ipsum
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
position:relative;
background-color:#999;
}
#to-be-sized{
position:absolute;
top:0;
height:100%;
background-color:#ddd;
}
</style>
<body>
<div class='container'>
<br>
<div style='display: block; height: 500px'>left</div>
<br>
<div id='to-be-sized' >right</div><br>
</div>
</body>
</html>
CSS files use the 'padding' function to determine the height and depth of containers. To change the height of the container field simple insert of adjust the padding fields for the specified containers.
The code excerpt below is an example of the CSS used for a container class (you'd find this as in the html file.
.container{padding-top:100px;padding-bottom:50px}header
i use the overflow:hidden it work properly.
.bu {
overflow: hidden;
background-color:blue;
}
<div class="bu">
<button>english</button>
</div>
try adding this to the div to be resized
.layout-fill {
margin: 0;
width: 100%;
min-height: 100%;
height: 100%;
}
I did something similar to KyokoHunter:
$('div.row').each(function(){
var rowHeight = $(this).innerHeight();
$(this).children('div.column').css('height',rowHeight);
});
This goes through every row in a div "table" and makes the heights all match, as long as the divs are classed accordingly.