<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.
Related
I am trying to add a padding-bottom to an div class="col-md-4" directly without using css. Is it possible?
I tried this code
<div class="col-md-4 padding-bottom:15px">
also
<div class="col-md-4" "padding-bottom:15px">
full content code is
<div class="gal">
<div class="container">
<div class="col-md-12 no-padding">
<div class="row">
<div class="grid clearfix">
#foreach($albums as $album)
<div class="col-md-4">
<figure class="effect-julia"> <img src="{{$album->gallery->imageUrl(null,300,239)}}" alt="czcsdcsd -{{$album->name}}"/>
<figcaption>
<h2>{{$album->name}}</h2>
<div>
<p>View More</p>
</div>
View more </figcaption>
</figure>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
it does not change anything.please help
<div class="col-md-4" style="padding-bottom:15px"></div>
Just use the attribute style, but I have to say using CSS in the HTML directly is not the best way...
Also, you can use bs4 classes like pb-number for setting padding-bottom, or pt-number for setting padding-top where number is number from 0 to 5 (or auto) which is equivalent to values in rem from .25rem to 3rem.
In your case, you can use class="pb-1" for example.
You can find out more in the official documentation of bootstrap4:
I want to align and image and an div inline. I also want the top's of the image and div to be aligned aswell. This is what I have so far
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block">
<div class="comment d-inline-block">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
I tried the class d-inline-block and it gets close to what I'm looking for but i need the text to be at the top.
You can see here:http://www.bootply.com/zpj12TL4wI
Bootstrap 4 includes a utility class for that: align-top. No extra CSS is needed...
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid">
<div class="comment d-inline-block align-top">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
</div>
http://www.bootply.com/wtAOA1JPn1
Just a vertical-align change is what ya need:
.comment {
vertical-align: top;
}
I have the following structure of my page:
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="picture">
<div class="row" style="margin-left:0px !important;margin-right:0px !important;padding-bottom:10px;">
<div class="col-md-1">
<img src="url" />
</div>
<div class="col-md-11">
Some name <br/>
Some email
</div>
</div>
</div>
</div>
<div class="col-md-3">
some text here
</div>
</div>
</div>
My issue is that when device width is smaller, name and email goes on the next row but not in the same row where image is. How to fix that? It should be responsive. Thanks!
Every column at a mobile breakpoint will have a width of 100%, which means your .col-md-* classes will all have a width of 100% at smaller sizes. This is a common expectation for responsive grid systems.
To get the image and inputs on the same line, you will have to add another class that overrides the widths set by the bootstrap col classes. Bootstrap has specific classes to target different breakpoints that you can use. See: https://getbootstrap.com/examples/grid/
HTML
<div class="col-md-1 col-xs-6">
<img src="url" />
</div>
<div class="col-md-11 col-xs-6">
Some name <br/>
Some email
</div>
This should do the trick.
I have layout with two left floating divs - one for a picture the other for content. In the content div I have inserted a table to show some numeric data. When I add the table to the content div my float seems to get lost, the second div does not show up next to the first one but rather below.
Code example:
<div style="float:left;">
<img src="images/image.jpg" width="200" height="125" alt="Image" /></p>
</div>
<div style="float:left; padding-left:16px;">
<p>Paragraph text </p>
<table width="650">
....
</table>
</div>
Please check the width of the parent div that contains these two divs, my guess is that the parent does not have enough width to accommodate both given their content and width settings.
<div style="width:866px;overflow:hidden">
<div style="float:left;">
<img src="images/image.jpg" width="200px" height="125" alt="Image" /></p>
</div>
<div style="float:left; padding-left:16px;">
<p>Paragraph text </p>
<table width="650px">
....
</table>
</div>
</div>
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.