I have a fluid grid built with <li> elements.
eg:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
li
{
border:solid 1px green;
width: 100px;
min-height:50px;
display: inline;
margin: 10px;
float: left;
}
so this looks something like:
----------- ----------- -----------
| | | | | |
| | | | | |
----------- ----------- -----------
----------- ----------- -----------
| | | | | |
| | | | | |
----------- ----------- -----------
hooray!
The problem is when I add content in one of the <li> elements which stretches the height. I want to end up with something like this:
----------- ----------- -----------
| apples | | | | |
| oranges | | | | |
| lemons | ----------- -----------
| cherries|
-----------
----------- ----------- -----------
| | | | | |
| | | | | |
----------- ----------- -----------
But I actually end up with something like this:
----------- ----------- -----------
| apples | | | | |
| oranges | | | | |
| lemons | ----------- -----------
| cherries|
----------- ----------- -----------
| | | |
| | | |
----------- -----------
-----------
| |
| |
-----------
booo!
So basically, I'm trying to keep the 'row' aligned when one of the <li>s is pushed down from the above element, instead of it pushing to the available space to the right.
Have a look at the code below.
Obviously the IE hacks and moz rules should be moved into conditional stylesheets and there are some padding issues (read: use a css reset)
but other than that this should do the trick....
alt text http://img835.imageshack.us/img835/9594/example1281542227415.png
Example
<style type="text/css">
ul {
background-color:#ddddff;
overflow:auto;
margin:0;
padding:0 0 0 4px;
width:296px;
}
li {
background-color:#ddffdd;
display:inline-block;
/* Trick FF2 into using inline-block */
display:-moz-inline-stack;
/* Trick IE6 into using inline-block */
*display: inline;
zoom:1;
list-style-type:none;
margin:0 0 0 -4px;
/* Trick IE6 into enforcing min height */
min-height:50px;
height:auto !important;
height:50px;
padding: 0;
vertical-align:top;
width:100px;
}
</style>
</head>
<body>
<ul>
<li>apples<br />oranges<br />lemons<br />cherries</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
Related
I'm looking for a Dashboard Layout with bootstrap 4.
Based on https://getbootstrap.com/docs/4.0/examples/dashboard/ the dashboard works already fine.
But combined with https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/ it seems not to work.
In the end the layout should look like this:
+----------------------------------------------------------------------+
| Nav (fixed, sticky) |
+----------------------------------------------------------------------+
| | |
| | |
| Sidebar | Main (scrollable) |
|(scrollable)| |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+----------------------------------------------------------------------+
| Footer (fixed, sticky) |
+----------------------------------------------------------------------+
Is this possible?
Is there any example how it could work?
Thanks a lot.
Put Footer before </main> tag.
<footer class="footer" style="text-align: center;">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</main>
To navbar add navbar-fixed-top and to footer add:
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #eeeeee;
}
If I try the old absolute centering trick of left:50% and transform:translate(-50%, 0) on a child element that is a table (with 'auto' width), the width is limited to 50% of the parent:
What I want:
-----------------------------------------
| |
| |
| |
| ----------------------------- |
| | | |
| | | |
| | | |
| ----------------------------- |
| |
| |
| |
-----------------------------------------
But what I get is:
-----------------------------------------
| |
| |
| |
| -------------------- |
| | | |
| | | |
| | | |
| -------------------- |
| |
| |
| |
-----------------------------------------
The reason being, when 50% left is applied it's reduced in width to fit the parent:
-----------------------------------------
| |
| |
| |
| --------------------|
| | ||
| | ||
| | ||
| --------------------|
| |
| |
| |
-----------------------------------------
Which is then centered using translate.
Any way to overcome this and keep auto width set on the table?
Code here: https://jsfiddle.net/n4f9v5ro/3/
Only seems to be a problem when the child is display:block?
You can center by using auto margins instead of left: 50% and translateX(-50%).
.main {
width: 500px;
height: 500px;
position: relative;
border: 1px solid black;
margin: 30px;
}
.main > div {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
border: 1px solid blue;
}
table {
margin: 0 auto;
border: 1px solid red;
}
<div class="main">
<div>
<table>
<tr>
<td>some long text some long text some long text some long text some long text</td>
<td>something else</td>
<td>something else</td>
</tr>
</table>
</div>
</div>
<div class="main">
<div>
<table>
<tr>
<td>some</td>
<td>small</td>
<td>text</td>
</tr>
</table>
</div>
</div>
What I would like to accomplish with Bootstrap:
desktop view
+-------------------------------------------+
| | |
| | |
| | |
| | |
| | |
| | |
| sidebar | content |
|accordion | |
| menu | |
| | |
| | |
| | |
| | |
|----------| |
| submenu | |
+-------------------------------------------+
tablet view
+-------------------------------+
| | submenu |
| |-------------------------|
| | |
| | |
| | |
| | |
|side | content |
|bar | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+-------------------------------+
phone view
+--------------+
| submenu |
|--------------|
| sidebar |
| accordion |
| toogle |
|--------------|
| |
| |
| |
| content |
| |
| |
| |
| |
| |
+--------------+
What I have done so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-2 col-xs-12">
side bar
<div class="row">
<div class="col-md-12 col-xs-12">sub menu</div>
</div>
</div>
<div class="col-md-8 col-sm-10 col-xs-12">content</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
Is it really possible to make this sample template with Bootstrap? Any Bootstrap guru here to help me?
.............................................
Check this fiddle
the trick is take advantage of the Responsive utilities
http://getbootstrap.com/css/#responsive-utilities
I want something below like structure in my webpage:
+---------------+ +-----------+
| | | |
| | | Div-B |
| | |Float:left |
| | | |
| Div-A | | |
| Float: left | +-----------+
| | +-----------+
| | | Div-C |
| | |<marquee> |
| | |</marquee> |
| | +-----------+
| |
+---------------+
But I can't creat Div-C like above style. If I give a different background color of Div-C, it extends to left border of Div-A. So I can't make white spaces between Div-A and Div-C. It is becoming like this:
+---------------+ +-----------+
| | | |
| | | Div-B |
| | |Float:left |
| | | |
| Div-A | | |
| Float: left | +-----------+
|---------------|-+-----------+
| Div-C |
| (Background color fills |
| this whole section |
|---------------|-+-----------+
| |
+---------------+
Also note that Div-C contains a marquee.
Please give me solution.
Why don't you use something like this: (working jsFiddle)
HTML:
<div id="mainContainer">
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
</div>
CSS:
#mainContainer{ overflow:hidden; }
#divA{ float:left; width:60%; }
#divB{ float:right; width:30%; }
#divC{ float:right; width:30%; }
2 ways possible.
1) You could use CSS Positioning. Cover all your divs in a mother div then give the mother div a CSS position:relative; and a desired width and height... then all the Children CSS position: absolute; then DivA could have CSS left:0px; then DivB could go for a CSS right:0px; top:0px; then DivC CSS right:0px bottom:0px;... give them their respective widths and Colors.
Example:
<style type="text/css">
.kids{position:absolute;}
</style>
<div id="mainContainer" style="width:300px; height:500px; background:#ccc; position:relative;">
<div class="kids" id="divA" style="width:60%; height:100%; top:0px; left:0px; background:orange;">A</div>
<div class="kids" id="divB" style="width:60%; height:50%; top:0px; right:0px; background:green;">B</div>
<div class="kids" id="divC" style="width:60%; height:50%; bottom:0px; right:0px; background:red;">C</div>
</div>
Fiddle: http://jsfiddle.net/pgkWL/
2) Create a <table> with 1 full column and 2 half columns. Place the divs in respective columns.
<div id="aNewWrapper" style="width:300px; height:500px;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" rowspan="2" height="500"><div id="divA" style="width:100%; height:100%; background:orange;">A</div></td>
<td width="50%" height="250"><div id="divB" style="width:100%; height:100%; background:green;">B</div></td>
</tr>
<tr>
<td height="250"><div id="divC" style="width:100%; height:100%; background:red;">C</div></td>
</tr>
</table>
</div>
Fiddle: http://jsfiddle.net/tWCBP/
I am using the 1140px fluid grid (cssgrid.net) layout.
I am having some problem..
My layout looks like this:
Side Menu - Content
- Content
- Content
- Content
- etc. etc.
My problem is, that my layout does like this:
Side Menu - Content
Content
Content
Content
Content
etc. etc.
I want, so my "Side Menu" is full height, so it will push the content to "the right".
My layout (Exist of 12 cols):
<div class="container">
<div class="row">
<div class="twocol">
-- Side Menu Content Here --
</div><!-- END 2col -->
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
</div><!-- END .row -->
</div><!-- END .container -->
The CSS is:
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
/*max-width: 1140px; */
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}
.row .onecol {
width: 4.85%;
}
.row .twocol {
width: 13.45%;
}
.row .threecol {
width: 22.05%;
}
.row .fourcol {
width: 30.75%;
}
.row .fivecol {
width: 39.45%;
}
.row .sixcol {
width: 48%;
}
.row .sevencol {
width: 56.75%;
}
.row .eightcol {
width: 65.4%;
}
.row .ninecol {
width: 74.05%;
}
.row .tencol {
width: 82.7%;
}
.row .elevencol {
width: 91.35%;
}
.row .twelvecol {
width: 100%;
float: left;
}
.last {
margin-right: 0px;
}
I hope you can help me. Thank you.
Your layout looks this way:
body
+------------------------------------------------------------+
| two col content ten col content |
| +--------------+ +---------------------------------------+ |
| | | | | |
| | | | | |
| +--------------+ +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
+------------------------------------------------------------+
Do not repeat that ten col content. Keep it as a wrapper and use smaller divs. Like this:
body
+------------------------------------------------------------+
| two col content ten col content |
| +--------------+ +---------------------------------------+ |
| | | | +-----------------------------------+ | |
| | | | | | | |
| +--------------+ | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| +---------------------------------------+ |
+------------------------------------------------------------+
In case if you want the HTML Code,
<div class="container">
<div class="row">
<div class="twocol">
-- Side Menu Content Here --
</div><!-- END 2col -->
<div class="tencol last">
<div>
content content content
</div>
<div>
content content content
</div>
<div>
content content content
</div>
<div>
content content content
</div>
</div>
</div><!-- END .row -->
</div><!-- END .container -->
Hope it helps!
You can add height: 100% to the menu-div (twocol). That should do it.
In any way: maybe it would be a bit better to change the structure of the divs a bit:
<div class="menu">
-- Side Menu Content Here --
</div>
<div class="content">
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
</div>
I my experience it makes the layouting easier, when you have seperate divs containing the menu, content, header and footer.
When you use float, I often set a backgroudcolor to my divs during development, so I can see how much space they take (especially the height). Because as soon as the div ends, all left floated divs will go as far left as they can.
I just did it here on jsfiddle ( http://jsfiddle.net/cXXGj/ ). I think you need this way. I just wrapped content inside another div with class content_container. Have a look at the fiddle: http://jsfiddle.net/cXXGj/