I've a doubt. Lets consider that we have a div of width 200px. If i add the following the style
style="padding-left:10px; padding-right:10px"
to the element what happens actually? Will the total width of the div increases to 220px with 10px at the left (for left padding), original width 200px at the middle and 10px at the right (for right padding)?
Or will it takes the padding space from the 200px and becomes (10px + 180px + 10px)?
Does the above rendering differs for each browser (especially IE and FF)?
Update
<div style="width:180x">
<div style="width: 180px;background-color: #4E81BD;text-align: left;padding-left: 5px;padding-right: 5px;">
<a class="anchor-tag" href="Javascript:;"><span style="font-family: Calibri,Tahoma,Verdana;font-weight: 500; color: white">Rasu</span></a>
</div>
<div style="width: 180px;height: 270px;border: 1px solid #4E81BD;padding: 5px;overflow-y: auto;overflow-x: hidden;">
<div style="border: 1px solid #DADADA;height: 150px;overflow-x: hidden;overflow-y: auto;text-align: left;font-family: Calibri;">
</div>
<div style="height: 10px;">
</div>
<div style="height: 75px;border: 1px solid #DADADA;">
<textarea>[Type your message here]</textarea>
</div>
</div>
</div>
Thank you
NLV
It will become 220px wide.
In IE5 or IE6 (quirks mode), it will be 10px+180px+10px, but I wouldn't worry about that.
The full story can be found here: http://www.quirksmode.org/css/box.html
All modern browsers conform to the W3C box model. See here for details. Here's a diagram demonstrating how the overall dimensions of a box are calculated:
Essentially the dimensions of a box are width + padding + border. The margin is not added to the width, although it may affect the box's positioning.
Philippe is correct about IE5, which has a broken box model.
If you'd like to alter the way the box model works, you can use the box-sizing CSS3 attribute, though at this stage you'll have to also use -webkit-box-sizing, -ms-box-sizing and -moz-box-sizing to ensure that the different browsers all pick up the value.
More details here: http://www.quirksmode.org/css/box.html
Related
Does anyone have any pointers on this? I have this issue a lot with responsive (this one is for an email specifically).
Example of the problem: https://imgur.com/IRYTJ6Y
My child element exceeds the parent only when resizing for mobile (this window is sized at 375px).
This usually only happens when I have added a margin/padding which expands the right scroll the same distance. So for example here I have a 30px padding on the left and right sides so there is 60 extra pixels on right (scrolling to the right this is what you see: https://imgur.com/ZZ7okEv )
Looking for a fix that will work in the future and not just for this design but here is the code I'm working with currently:
<table class="row" style="height:100%;width:100%; max-width:inherit">
<tr>
<th class="small-12" style="padding-left:30px;padding-right:30px; padding bottom:15px; padding-top:10px; margin-right:-100pximportant;;left:0;right:0; max-width:inherit">
<h1 style="color:#e41e26; font-size:1.35rem; font-weight:500">Visit NRTC at Booth #363 at TechAdvantage 2018</h1>
<p style="font-family: 'Lato', sans-serif; font-size:1.1rem; line-height:1.8em;">See what our Demand Management partners<strong>—Nest, Aquanta,</strong> and <strong>DVI</strong>—can do for you</p>
</th>
</tr>
</table>
You should add box-sizing: border-box; to include an element's padding and border into the width, which is especially useful when you use a percentage value like 100% for width. Otherwise (in this case) the width will become more than 100%, which will overflow.
I am trying to create standard responsive page using bootstrap css. Just created simple page with header, page content and side links. I have few doubts here.
I put 4% margin for all 4 side, but even why top and botton margin less compare to left right?
Why there is much distance between well and page-header?
I took hr for link seperation, why it is taking so much distance between each?
Can I set all border color to #27ae60
Link to fiddle - http://jsfiddle.net/karimkhan/EjFjr/1/
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="well">
Welcome ...!
Get you timeline info ...
</div>
<div class="page-header">
<h1>
<small>Get purified for all desease</small>
</h1>
</div>
<table border="0" width="100%">
<tr>
<td style="width:75%" valign= "top">
<p> Triaenops menamena is a bat in the genus Triaenops found on Madagascar, mainly in the drier regions. It was known as Triaenops rufus until 2009, when it was discovered that that name had been incorrectly applied to the species. Triaenops rufus is a synonym of Triaenops persicus, a closely related Middle Eastern species. Triaenops menamena is mostly found in forests, but also occurs in other habitats. It often roosts in large colonies and eats insects such as butterflies and moths. Because of its wide range, common occurrence, and tolerance of habitat degradation, it is not considered to be threatened </p>
</td>
<td style="width:25%" valign= "top">
<ul id="newStuff" class="nav nav-tabs nav-stacked">
<li style="display: block;">2 column Google maps, foursquar..</li><hr class="line1">
<li style="display: block;">spsr..</li><hr class="line1">
<li style="display: block;">Bootstrap 3 Control Panel..</li><hr class="line1">
<li style="display: block;">twests..</li><hr class="line1">
<li style="display: block;">Interdev..</li>
</ul>
</td>
</tr>
</div>
</div>
</div>
Additionally to the scarecrow's answer,
You can use Chrome Developer tools (even IE/Firefox has the same options) to see what is happening with your layout, for yourself
Open your web page in Chrome Browser
Press F12
Select Magnifying glass on Chrome developer tools window Top Left corner
Hover/Select the element you need to inspect.
Then check the right side panel of the Developer tools window, you can see what are the styles applied to the selected element (Styles tab), and what are the final values applied to the object (Computed tab) + more
You have set margin as 2% and it is working as intended. Double check with firebug to see the margin.
The space between .well and .page-header is because of the default css of those elements. This is the original css of page-header. See the margin property
.page-header
{
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
Same is the reason for hr. This is the original css
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
Yes you can. Just apply the border-color: #27ae60 style to an element that encloses all the other elements or the body element
Yes, first of all, use development tools
From using it, i have some answers for you
1) if you talk about .container , do not use margin and width at the same time ... use only margin and let the width to expand the whole page (default div)
2) the .page-header has inside a h1, which has its own top-bottom margins
3) same as for 2)
4) body {border-color: #27ae60}
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I've set float for one of my table's cells. But now I can't change vertical alignment of it's contents. By default, it moves the contents to the top of the div. I tried valign: middle, vertical-align: middle with no success. Here are the results:
With float: left
Without float: left
How can I align vertically cell's contents with float?
And markup looks like that
<td id="top_logo">
<a href="index.php">
<img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
</a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>
I don't know if this will help (I've left Table based layouts behind now) , but to solve a similar issue using straight divs you can do the same using the line-height rule.
<div id="tableRow">
<div id="leftCell"><img src="mylogo" /></div>
<div id="middleCell"> </div>
<div id="rightCell">User Name Here</div>
</div>
Your CSS would be created to set widths/heights etc, which I guess you won't need for a table, and for your "rightCell", you'd set the line height to be the same as the row height:
#rightCell
{
height: 30px;
line-height: 30px;
}
What then happens is the text is centred vertically in the line space, which because it's the same as the height, gives the impression it's in the centre of the element too.
Now like I say, I've NEVER tried this on a table-cell, however any modern browser should let you change the display property to say block or inline-block using:
display: block;
Changing block for any of the other types where needed. This will set the display type of the cell to be like a div (or a span, or some other element) but I DON'T KNOW what effect it will have on the table.
Note also, that I'm not addressing older browsers Like IE6 here, to make this work across the board you may have to make some hacks for older browsers if support is required.
Can I use any tag that will allow me to place a line <hr /> on a specific left margin size
Have you tried:
<hr style="margin-left:10px;" />
I would prefer to use a div and add a border to that div. It's more flexible than the tag. This would be a example for a solid line with a margin of 5 px to the top and bottom and 10px to the left and right:
<div style="border-top:1px solid #000;margin:5px 10px;"></div>
I haven't tested it but that should work fine :)
edit: i tested it with firebug and edited the code above.