I am usually using table to do layouting. But I would like to try out the layouting in Div. Here is the problem, When I "float: left" a div, it makes the succeeding div to float with it. I tried to put "float: none" to the next div to make it break a line but it does not work.
Here is what I want to do using table:
<hr style="width: 100%;" />
<table>
<tr>
<td>
<div id="divLeftPane">
...
</div>
</td>
<td>
<div id="divCenterPane">
...
</div>
</td>
<td>
<div id="divRightPane">
...
</div>
</td>
</tr>
</table>
<hr style="width: 100%;" />
Here is what I have so far tried with div using float:
<hr style="width: 100%;" />
<div id="divContainer">
<div id="divLeftPane" style="float: left;">
...
</div>
<div id="divCenterPane" style="float: left;">
...
</div>
<div id="divRightPane">
...
</div>
</div>
<hr style="width: 100%;" />
The problem with the use of div is the bottom is also being floated to the left. I tried putting float: none to the last div, the HR tag and even the divContainer. Why does the last hr float?
This will give you the desired effect:
<hr style="width: 100%;" />
<div id="divContainer">
<div id="divLeftPane" style="float: left;">
...
</div>
<div id="divCenterPane" style="float: left;">
...
</div>
<div id="divRightPane" style="float:left; ">
...
</div>
<div style="clear: left;"></div>
</div>
<hr style="width: 100%;" />
Floating the 3 divs left will make them appear side by side, but you'll notice that divContainer does not take the height of the div tags inside it. Adding the div with clear:left basically undoes this.
edit: Avoid inline styles when you do this for real.
Use the attribute
clear:left;
on the bottom element.
adding
#divContainer {
overflow: hidden;
}
will accomplish this without the extra div at the end
Related
I have got a very annoying problem with bootstrap. I need to divide the page into two parts, left side is my pic and right side is specification. I thought I can simply use row and col, so I have done this:
<div class="layoutProb">
<div class="container" style="width: 1920px;">
<div class="row" >
<div class="col-sm-7" >
<img src="../assets/Img/Beer.jpg" alt="..." class="pic"/>
</div>
<div class="col-sm-5" style="width: 600px;">
<table id="cart" class="table table-hover table-condensed" >
<thead>
<tr>
<th ><h1> The first <br>Tshirt>Here</span></h1></th>
</tr>
</div>
</div>
</div>
</div>
Here is my layout class:
.layoutProb {
top: 0px;
left: 0px;
width: 1920px;
height: 1080px;
}
I have attached the screen here to show what I mean. The gap between is too much. If I use float left then when I decrease the size of the page then the left side overflows, another problem is horizontal scroll and I want to get rid of it as well.
add a class when you need to remove spaces use it
.p-0{
padding-right:0;
padding-left:0;
}
in HTML write this class
<div class="row">
<div class="col-md-2 p-0">
//stuff here for this column
</div>
<div class="col-md-10 p-0">
//stuff here for columns
</div>
</div>
Also, you can use this method
Simple add .no-gutter class on row.
https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works
I need to create a list of divs as looking like below sample:
I'm using Bootstrap grid system and augularjs. I create divs dynamically, using angularjs ng-repeat directive.
What I want is an endless list of divs containing attribute 'class"col-md-2"' inside a div containing attribute 'class"col-md-12"'. Then I want to use a scrollbar to scroll all the divs in the outer div.
Example code:
<div class="col-md-12" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
This doesn't work and "off course" is creating new rows each time ng-repeat is creating a div.
How do I prevent that from happen?
I solved the problem like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-11" scrollablehorizontal>
<table class="borderless">
<tbody>
<tr>
<td ng-repeat="newviews in newviews" valign="top" class="shadowbox" scrollableverticall>
<p>
all the things...
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-1"></div>
</div>
</div>
in a col-md-12, there can be 6 x col-md-2 after that there is a linebreak.
try to change "col-md-12" to "row-fluid"
<div class="row-fluid" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
and add css:
.row-fluid{
white-space: nowrap;
}
.row-fluid .col-md-2{
display: inline-block;
margin-left:10px;
}
jsfiddle
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 am trying to create a vertical stack of image thumbnails. One thumbnail per line.
I am trying to upgrade my CSS skills. I have this working with a table using
<table>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
</table>
I'd like to not use a table and accomplish this using divs and CSS. This was I have better control over the spacing and layout in the future.
Any thoughts?
Very simple:
<div><img /></div>
<div><img /></div>
<div><img /></div>
A div is a block level element. Unless you specified other wise it acts similarly to a <tr> tag
Use a simple div and put some id's for every img. In CSS for the same you can modify the properties of the different id.
I would recommend you start by learning about DIVs and their properties. W3 Schools is a good start.
To get started with yours simply do:
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
DIVs by default are treated as block elements meaning they start on a new line automatically. So if you want them to appear inline then you will need to specify that by either using display: inline-block; or float:left;
Use divs/sections, define how many columns you want, lets say 4 columns...
http://jsfiddle.net/tBDjV/
<div class="col-1">
<img />
<img />
<img />
</div>
<div class="col-2">
<img />
<img />
<img />
</div>
<div class="col-3">
<img />
<img />
<img />
</div>
<div class="col-4 last">
<img />
<img />
<img />
</div>
.col-1, .col-2, .col-3, .col-4 {
float: left;
width: 22%;
margin-right: 4%;
box-sizing: border-box;
}
.last {
margin-right: 0;
}
How to make display:table-cell style works (or look-alike alternative) if divs with style table-row are inside table cells? (see the link)
http://jsfiddle.net/ELKQg/460/
I'd like the container1 div behave like the container2.
code: (if the link were to become unreachable)
html:
<div id="container1" class="container">
<table>
<tr>
<td>
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</td>
</tr>
</table>
</div>
<div id="container2" class="container">
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</div>
css:
.container{width: 500px;overflow:hidden; /* instead of clearfix div */}
div { border:1px solid;padding: 1px;}
.row {display:table-row;}
.cell {display:table-cell;}
.expand{overflow:hidden;width:100%;}
The extra <table> containing your <div>s in .container1 needs to have width: 100%
display: table-cell elements don't necessarily need a containing display: table-row as long as the parent is display: table. Set the .row to that (ideally you'd re-name it, seeing as the rule no longer makes sense)
Fixed and forked your demo:
http://jsfiddle.net/barney/ahMg8/
Use display: table for the parent table before using display:table-cell
Use td's instead of divs inside tr:
<div id="container1" class="container">
<table>
<tr>
<td class="cell">aaaa</td>
<td class="cell expand">b</td>
<td class="cell">c</td>
</tr>
<tr>
<td class="cell">d</div>
<td class="cell expand">eeeee</td>
<td class="cell">f</td>
</tr>
</table>
</div>
Working fiddle