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;
}
Related
In my footer I want to make 3 different sections of paragraphs-at left, middle and right. The 3 paragraphs should sit next to each other, not below each other.
This is how I was trying to do, but I failed to figure it out.
<footer>
<div id="footer_box">
<p id="footer_text_left">
should sit at the left.
</p>
<p id="footer_text_middle">
should sit in the middle.
</p>
<p id="footer_text_right">
should sit at the right.
</p>
</div>
</footer>
.CSS:
#footer_box{
border-top:2px solid #009933;
padding-bottom:75px;
background-color:#3366CC;
}
#footer_text_left{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_middle{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_right{
font-size:15px;
font-family:Euphemia;
color:black;
}
First option:
p {
float: left;
}
Second option:
p {
float: left;
width: 30%;
margin: 0 1%;
}
Third option (best):
p {
display: inline-block;
}
Another thing I saw was that every paragraph had the same rules, you could set the font properties on the body or global paragraph so you won't need to set it on everything.
That would look like this:
body {
font-size:15px;
font-family:Euphemia;
color:black;
}
Or if you want it just on the footer paragraphs:
footer p {
font-size:15px;
font-family:Euphemia;
color:black;
}
This is Extremely easy to do, either by making the <p>'s inline-block, or float:left them:
#footer_box p{
display:inline-block;
}
inline-block, (or inline) is the best way to do it, as float:left, has some unwanted effects, such as the <p>'s no longer effect the height of their parent, as can be seen in this JSFiddle, compare it with the one below.
JSFiddle
See this SO question about it: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Just capture the paragraph into a div and add style. For example
<div style="float: left; margin-right: 20px">
Here's how I did for a paragraph containing picture: https://jsfiddle.net/xomkq7dv/7/
I'm currently redoing some code to update to HTML5 (and trying to de-uglify CSS), but so far my alignment and layout doesn't seem to be working as expected. Here's part of what I have:
<main class="width">
<div class="r1">
<section class="c1">
<h1>header</h1>
stuff
</section>
<!--Line Break-->
<section class="c1">
<h1>header</h1>
stuff
</section>
</div>
<!--Next Column-->
<div class="r2">
<section class="c2">
<h1>header</h1>
stuff
</section>
</div>
</main>
CSS:
#font-face {
font-family:'Roboto';
font-style:normal;
font-weight:400;
src:url(/resources/font.woff) format('woff');
}
* {
margin:0;
padding:0;
font-size:small;
font-family:Roboto;
vertical-align:middle;
border:none;
text-decoration:none;
}
.width {
margin:0 auto;
width:86%;
min-width:1000px;
}
.bg {
min-width:1000px;
background:linear-gradient(#444, #000, #444);
}
main {
line-height:1.5;
text-align:center;
}
body>.main {
font-size:0;
}
section {
border:1px solid #BBB;
background:#000;
border-radius:7px;
display:inline-block;
overflow:hidden;
}
h1 {
background:linear-gradient(#444, #000, #444);
padding:5px;
color:#FFF;
}
.r1 {
color:#FFF;
display:inline-block;
}
.r2 {
color:#FFF;
display:inline-block;
}
.c1 {
width:33%;
}
.c2 {
width:66%;
}
(Ignore r1 and c1 naming. They don't actually represent a row or column)
However, this does not work the way it used to. What I'm trying to do is to have two rows of 66% width columns above each other, and then next to them, a larger single 33% width column to the right of them. Instead, I've got the the first two sections on one line, taking up a total of 66% width (so each section is 33% width), and then the next section ends up underneath it.
Ideally, I want to use the flex code, so that I can use up all available space, but I'm still new to it, and don't know my way around it very well. The problem with using percentage widths is that even after white-space removal, things still break to the next line when zoomed in enough, and I think that the flex method is more elegant and modern anyway.
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.
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.