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.
Related
I am fairly new to html therefore this may be something very basic for you. This is the css file for my code:
.sidepanel-list{
margin-left: 10px;
background-color:lightgray;
When i run the file, the background color I have mentioned takes up all the space on the lines as I have put in the image. How do I limit it so it only takes some of the space on the lines?
Image will make it way clearer to understand what i am saying: https://i.stack.imgur.com/04dYi.png
In CSS, an element has a certain size (obviously). Inside that element, you can add padding to keep text or whatever away from the edge. Outside it, you can add margin to keep other elements away from that element.
What this hopefully shows is that your code is doing exactly what you asked: making the background color of the element itself gray, and then adding a margin outside that area of 10px. (This is why the gray doesn't extend beyond the text, even though you've specified that 10px of left margin, which is pushing the text out from the edge of the window.)
If you want 10px of space between the text and the edge of the gray area, use padding instead of margin.
If what you want is to make the whole thing narrower, you need to apply a width to the stylesheet (e.g. width: 50% or width: 400px).
To get a feel for this stuff, it can help to use your browser's Inspector tool. Among other things, this will show you the size, padding and margin on each element, so you can see exactly what's happening with your layout.
<!DOCTYPE html>
<html>
<head>
<style>
p.set {
background-color:lightgray;
}
</style>
</head>
<body>
<p class="set"><b>Categories</p></b>
<p class="set">Cable & docks</p>
<p class="set">cases & films</p>
<p class="set">charging devices</p>
<p class="set">connected home</p>
<p class="set">headphones</p>
</body>
</html>
I am having trouble make a jsfiddle that reproduces my problem, but I have one that demonstrates the basic layout I am dealing with.
http://jsfiddle.net/LurUM/4/
<div style="width: 73%; float: left;">
<!-- table here -->
</div>
<div style="width: 23%; float: right;">
<!-- sidebar here -->
</div>
I have a table on a page like this one, but it is not the correct width, it is much wider, colliding with the right side bar and going past it. I tried setting the table's width to 100% and going to a fixed table-layout. The width behaved exactly as I wanted it to, but then some of the texts in the cells of the table were spilling out and colliding with text in other columns. What I want is for the cells to become taller and the text to go onto a new line instead of spilling over, but if I understand correctly the fixed layout is preventing this.
Am I understanding the situation correctly? What's the solution? And why did the table have so much extra width to begin with?
Try this code:
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
The word-wrap: break-word property will wrap long words onto the next line and adjust words so that they don't break mid-word. When used in conjunction with table-layout: fixed; it will prevent the table bounds from overflowing.
If there is other content that must remain aligned with your table then keep the divs, otherwise I would suggest using id names for the tables, and moving all styles to the applicable style sheet. Your tables will then be getting their width setting directly from css instead of overflowing a parent container. I would also suggest that you use only one float, which ever is topmost on your page. This will keep the html cleaner i.e. easier to read and debug.
<div class="leftSide">
<table>html</table>
<p>other stuff that must be aligned with table</p>
</div>
<table id="rightTable">table that will float around other content</table>
<div>other content will continue to float until space is used up</div>
CSS
.leftSide {float: left; width: 40%; margin-right 20px; }
.leftSide table {width: 90%; }
.leftSide p {other css}
The html is easier to read this way, and specificity is used to drill down to the elements within the div, the table will be 90 percent of the width of its parent div and will no longer overflow the container (unless you put some giant image in there). Other CSS can be added including the word-wrap and break-word mentioned in other answers.
w3 has the definitive answers for CSS specificity and other inheritance issues like the one your facing http://www.w3.org/TR/selectors/
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.
How can I put an <img> next to a <div> so the image vertically aligns in the middle?
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"><div style="font:10pt Arial;padding:5px;background-color:#ccc;"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
I know how to do it using a table:
<table style="font:10pt Arial">
<tr>
<td style="vertical-align:middle"><img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"></td>
<td style="width:100%">
<div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
</td>
</tr>
</table>
But I wonder if I could do it without a table.
Thanks in advance!
Rain Lover
To be honest from your example I have a feeling you may be taking slightly the wrong approach for this.
Personally I would attach this icon to the div as a CSS background-image. Afterwards, you could apply padding to the left of the div equal to the width of the image (plus a few more pixels for spacing). Then, you will be able to use background-position to do something like this:
background-position:0px center;
This will give you the higher degree of control that I think you're after.
With block elements such as img and div, you cannot position them vertically in the centre of something without actually having a something (element) to vertically centre them inside of.
Having said that it is still not possible aside from using some sort of hack. The far simpler method would be to use a relative position on one of the elements and offset its position such that it visually creates the same effect, or use a margin/padding to do the same.
It can be done the following way. There is no easy way to center unless you have it inside an element with a specific height and can be played with. This can be viewed at http://jsfiddle.net/jawilliams346614/CvpUB/1/
<div>
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" style="float:left; padding:5px;">
<div style="font:10pt Arial;padding:5px;background-color:#ccc;">
<span style="float:right">No. 1</span>
<span style="font-weight:bold;padding-right:10px;float:left;">John Doe</span>
<span style="color:#808080">11/14/2010 3:23:44</span>
</div>
</div>
now if you increase your font size, you will have to change padding to:
padding-top: 5px; // change in sync with bottom to center in text
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
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