I have a html file
<div class="ads_list_admin">
{$dlt_msg}
{foreach name = fe1 item = k from = $all_ads}
<div class="ads_i_admin">
<div class="ads_own">
{$k->ad_owner}
</div>
<div class="ads_plc">
{$k->ad_place}
</div>
<div class="ads_own">
<a href="{$path_site}{$index_file}?menu=rm_ads&cmd=rmads">
Delete
</a>
</div>
</div>
{/foreach}
</div>
And the css for the div is :
.ads_list_admin
{
width:560px;
padding:10px 12px 10px 15px;
background:#cdc;
}
.ads_i_admin
{
width:540px;
clear:both;
margin:10px;
color:#666666;
font-family:Arial;
font-size:13px;
}
.ads_own
{
width:120px;
float:left;
padding:8px 6px 8px 6px;
}
.ads_plc
{
padding:8px 6px 8px 6px;
width:220px;
float:left;
}
But my div height is not full . That means the background color for the div is not fully showing . Whats the problem here ?
you need to clear floats, easiest way is to give the parent container overflow:hidden
A better way is to use this clear fix technique, give the parent container the cf class:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
The problem is the float: left on your inner-most divs. Floated contents are ignored when calculating an element's height.
Since everything is fixed width anyway, try replacing the float: leftwith display: inline-block. This also may be a situation where it is "OK" - preferable, even - to use a table, since it looks like this is tabular data.
Related
I have an array of content. I want to make a dynamic table. Can be using DIVs as well. I want to loop my array and I want the data to be displayed like this.
It should adjust the count and height of table automatically because I have to use it in DOMPDF.
The property of CSS column-count is not working so i want a work around and I will reward 50 bounty for whoever helps me solve this issue.
This is a basic solution:
HTML
<div class='wrapper cf'>
<div class='col-left'>
<div class='one'></div>
<div class='two'></div>
<div class='foo'></div>
<div class='type'></div>
</div>
<div class='col-right'>
<div class='oneone'></div>
<div class='twotwo'></div>
<div class='foofoo'></div>
<div class='typetype'></div>
</div>
</div>
and CSS:
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.wrapper{
width:400px;
height:auto;
min-height:100px;
border:1px solid #000;
box-sizing: border-box;
}
.col-left,.col-right{
width:50%;
float:left;
min-height:100px;
}
.col-right{float:right;}
.one{border:1px solid #000;width:100%;height:20px;}
.two{border:1px solid #000;width:100%;height:25px;}
.foo{border:1px solid #000;width:100%;height:120px;}
.type{border:1px solid #000;width:100%;height:80px;}
.oneone{border:1px solid #000;width:100%;height:40px;}
.twotwo{border:1px solid #000;width:100%;height:35px;}
.foofoo{border:1px solid #000;width:100%;height:120px;}
.typetype{border:1px solid #000;width:100%;height:110px;}
.col-left div:last-child,.col-right div:last-child{border-bottom:none;}
I give fixed height only for example .
The cf class is taken by gallagher site.
To achieve this result dinamically you can use for example a foreach function to loop an array.
I have some nested divs, some of which are supposed to display as a table because it makes my life easier, but one of the innermost divs is being given a 16px offset from the top and I can't get rid of it.
The HTML:
<div class="waiting">
<div class="table-row">
<div class="time">
09:55
</div>
<div class="customer">
<div class="cust-name">
Ana Ling
</div>
<div class="cust-deets">
Female, 51
</div>
</div>
<div class="menu">
TODO
</div>
</div>
</div>
The CSS:
.waiting {
display:table;
width:100%;
padding:0;
margin:0;
height:60px;
color:black;
background:rgb(134, 145, 149);
border-collapse:collapse;
font-family:"Segoe UI",Arial,sans-serif;
}
.waiting .table-row {
display:table-row;
}
.waiting .time {
display:table-cell;
background:rgb(125, 134, 139);
width:60px;
padding:20px 15px;
font-size:14px;
color:rgb(65, 73, 75);
}
.waiting .customer {
display:table-cell;
padding:0;
color:rgb(27, 35, 38);
padding:10px 15px;
}
.waiting .customer .cust-name {
font-size:18px;
margin-top:-16px; /* Undoing IE offset */
vertical-align:top; /* Come on stupid IE */
}
.waiting .customer .cust-deets {
font-size:14px;
margin:0;
}
.waiting .menu {
display:table-cell;
}
To be specific, it is the cust-name div that is being offset by an unnecessary 16px from the top, and neither negative margins nor manually reassigning the top position does anything. I even tried changing the value in the console within the box model, but that 16px just keeps re-asserting itself regardless of what value I change it to. I've also tried setting the position to relative before assigning the top value, but that just made the height of the element bigger.
I am trying to do this in IE11 and this website will only every be viewed on IE11, so if you even just have a hacky solution that only works for IE11, please give it to me!
I think you're going about this the wrong way. You want to show tabular data but you want to avoid using an actual table, presumably because "tables are bad". Tables are considered bad form for layout, it's true, but you're showing structured data. Start by making it a table and style it from there, save yourself a lot of headaches.
Add a vertical align to your .waiting .customer and remove the padding top as well (and remember to remove the negative margin from .cust-name).
.waiting .customer {
display:table-cell;
color:rgb(27, 35, 38);
padding: 0 15px 10px;
vertical-align: top;
}
I'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}
My floats are acting strange (well I guess they're acting how they're supposed to), but I can't seem to understand why. For some reason the div box that contains 'Alex' always goes down to another line. Is there something I'm messing up?
style.css
.clear {
clear:both;
}
.page-header {
width:100%;
background:#efefef;
border-bottom:1px #ddd solid;
padding:3px 10px;
margin-bottom:24px;
}
.page-header-title {
width:200px;
float:none;
}
.page-header-search {
float:left;
width:100px;
}
.page-header-top_menu {
float:right;
width:200px;
}
index.html
<div class="page-header">
<div class="page-header-search">
blah
</div>
<div class="page-header-title">
Calender
</div>
<div class="page-header-top_menu">
Alex
</div>
<div class="clear"></div>
</div>
Thank you very much.
If you exchange the
float: none;
for the "calender"-div with
float: left;
the "Alex" behaves better.
You didn't specify how it should look like.
http://jsfiddle.net/wDp3p/ << I visualized your div-structure with red borders.
http://jsfiddle.net/wDp3p/1/ << version with float: left;
"float" is not really for solutions like table columns but for floating - so the "calender"-div floats directly after its left hand previous element.
You're floating it wrongly. You should assign a float property to .page-header-title.
In IE7, my order sample button "#itmSampl" isn't vertically aligned with the ".add-to-cart" button to the left of it, although in FF3.6 and Chrome 5 it is. I need it to be aligned correctly in IE6-8. Does anyone see what I'm missing?
<style type="text/css">
#buttonbox { position:relative; width:326px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><%=getCurrentAttribute('item','addtocarthtml')%></table>
</div>
<div id="ordrWizrd" class="add-to-cart"><img src="/images/img/add-to-cart.gif" alt="configure item"></div>
<div id="itmSampl"></div>
</div> <div class="clearfix"></div> </div>
Also, here's the test page if a visual helps (you have to login to see the buttons instead of the bulleted list): http://www.avaline.com/85W_test_2
Login:test2#gmail.com
Pass:test03
Solution 1: Since you are already using a lot of tables in your page, another one won't hurt - just change your HTML from what you have above to something like this (may require a few tweaks):
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><tr>
<td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
<td valign="bottom"><div id="itmSampl"></div></td>
</tr></table>
</div>
<div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->
Solution 2: Take away all the "position: absolute" stuff with #itmSampl (remove the CSS bottom, position, right, and maybe margin and height/width properties). Then, add CSS float: right; margin-top: -36px; to #itmSampl to make it float on the right and move upward 36 pixels.