I have a div-table that is working fine with about 4 columns but now I want to make the items expandable so that another div appears below the entry. The problem is that if I use another div below the table-row its width is getting stucked to the first columns-width.
What I need is a division that ignores the table-layout .. any GOOD solutions for this?
It looks like your final spanning div at the bottom is taking some strange inheritance from your divTable class. In your code, your final div is within the wrapper of divTable. I've amended your code slightly to have the div outside of the divTable div and it spans all columns.
<div class="navContent">
<div id="lastRequests" class="divTable">
<div class="divRow bold">
<div class="divCell c1"> SiteID </div>
<div class="divCell c2"> Ort </div>
<div class="divCell c3"> Anfrage </div>
<div class="divCell c4"> Ergebnis </div>
<div class="divCell c5"> Datum </div>
</div>
<div class="divRow">
<div class="divCell c1"> 56831-12481 </div>
<div class="divCell c2"> gütersloh </div>
<div class="divCell c3"> 332312, Bielefeld, <span class="tooltip" data-tooltip="Open. Web. Business.">Deutscheland</span>, 80.32, 43.23</div>
<div class="divCell c4"> Proxy </div>
<div class="divCell c5"> 05.09.2012 20:20:21 </div>
</div>
</div>
<!-- move this div here -->
<div style="background-color: #0F9;">
This div should use the whole width
</div>
</div>
Edit: While this will work, I agree with everyone else above when they say you should really just use a table for this data instead of trying to replicate table functionality with divs.
As far as I'm aware CSS doesn't have an option to display a div using a colspan attribute.
I'd recommend either using a real table element if it's to display acrtual tabular data or alternatively simply recreate the layout using divs with the table attributes and your own custom styles.
Related
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
Because of inherited html parts when using template engines such as twig (PHP) or jinja2 (python), I may need to nest rows like below:
<div class="container">
<div class="row">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
<div class="row">
...
</div>
</div>
Then should I wrap inner rows in column div like below:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
</div>
<div class="row">
...
</div>
</div>
Or should they be wrappered in container again?
You shouldn't wrap the nested rows in .container elements, but you should nest them in columns. Bootstrap's row class has negative left and right margins that are negated by the col-X classes' positive left and right margins. If you nest two row classes without intermediate col-X classes, you get double the negative margins.
This example demonstrates the double negative margins:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- GOOD! Second "row" wrapped in "col" to negate negative margins. -->
<div class="container">
<div class="row">
<div class="col-xs-12" style="background: lime;">
<div class="row">
Here's my text!
</div>
</div>
</div>
</div>
<!-- BAD! Second "row" missing wrapping "col", gets double negative margins -->
<div class="container">
<div class="row">
<div class="row" style="background: tomato;">
Where's my text?
</div>
</div>
</div>
For further reading, The Subtle Magic Behind Why the Bootstrap 3 Grid Works explains the column system in great and interesting detai.
You shouldn't wrap them in another container - containers are designed for a typical one-page layout. Unless it would look good / work well with your layout, you may want to look into container-fluid if you really want to do this.
tl;dr don't wrap in another container.
I'm having a really simple problem with css but the solution is not coming to me. It's about positioning elements in a grid, I want the grid elements to look like this, but instead they are coming out to look like this. I tried putting one tag inside the other and then attempting to remove the box model from it (margin and padding) but the div is offset. I've tried nesting both inside a div tag but that doesn't work either.
I attempted to do a jsfiddle but it's not loading correctly. Fiddle . required random code below of the html.
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div></div>
<div class="col-md-7" style="height:40px">head text
<div class="col-md-7" style="margin-left:0px;padding-left:0px;margin-top:40px;box-sizing:border-box;">nav</div>
</div>
</div>
</div>
Just fyi the bootstrap col-md-1 through col-md-12 are bootstraps grid positioning system. I think they have to add up to 12 to form a single line. Here is the bootstrap html i am using.
and the grid css . and bootstrap
Your jsfiddle is not displaying correctly because the default iframe size is too small, but you can change the width to view the page in a manner consistent with your problem. Your problem is that you have a div nested inside another div by mistake. Try the following instead:
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div class="col-md-8" style="height:45.3px">head text</div>
<div class="col-md-8" style="height:40px;">nav</div>
</div>
</div>
<!-- /container -->
I'm using blueprint-css and I would like to have a horizontal scroll bar in the span-24 which allows the 3 span-12 divs below show up on the same row. This seems like it should be a simple thing but I can't get it working. The overflow-x:scroll gives me a scroll bar but the final span-12 shows up on a new line.
HTML:
<div class="span-24 table-container">
<div class="span-12">
Some Content
</div>
<div class="span-12">
Some Content
</div>
<div class="span-12">
Some Content
</div>
</div>
CSS:
div.table-container {
overflow-x:scroll;
}
With grids its always not so good to try to modify the grid layout system so i would suggest that you create a div inside your grid column instead of trying to modify the span class itself, like so:
<div class="span-24">
<div class="table-container">
<div class="span-12">
Some Content
</div>
<div class="span-12">
Some Content
</div>
<div class="span-12">
Some Content
</div>
</div>
</div>
By the way, just noticed that your span classes don't add up, 12+12+12 is 36, while your container is 24, try to lower your inner span classes to add up to 24, like so:
<div class="span-24">
<div class="table-container">
<div class="span-8">
Some Content
</div>
<div class="span-8">
Some Content
</div>
<div class="span-8 last">
Some Content
</div>
</div>
</div>
Demo: http://jsfiddle.net/CbRgc/
<div id="footer">
<div class="container_16">
<div id="footer_title" class="grid_16"> history <img src="{$AltImagesDir}/collapse_down.gif" height="7" width="6" border="0" /> expand | <img src="{$AltImagesDir}/collapse_up.gif" height="7" width="6" border="0" /> collapse </div>
<div class="clear"></div>
<div id="footer_content" class="grid_16">
<div class="grid_4 alpha" id="f_left_content">Left Content Here</div>
<div class="grid_3">1st Column Content Here</div>
<div class="grid_3">2nd Column Content Here</div>
<div class="grid_3">3rd Column Content Here</div>
<div class="grid_3 omega">4th Column Content Here</div>
</div>
<div class="clear"></div>
<div id="footer_bottom" class="grid_16">About Us Policies Terms & Conditions Help Contact Us </div>
The last grid_3 omega class pushes down and doesn't lay on the level of first 4 columns.
I think you have a problem with the margins between the colunms. Delete this div (id="footer_content"). you do not need it or delete the class definition of this div...
Or make a new div that wrap the inner divs of div id="footer_content".
But you can always use the Generator on the 960.gs site
BTW: Do you have borders in your css definitions? You must remove all borders, because float is precise and will break if you make the elements any larger than the framework defined.