I'm sure i'm doing a few things wrong here, but I can't seem to narrow down where the specific issue is that is causing the problem:
http://www.accessdigitalmedia.com/modaltest/ibtest.html
The text "1 Healthy Midday Meal for One Child Overseas" is ignoring the 5 px right padding on the parent div. I think the problem may be the table inside the div. When I look at it with firebug, it appears that the table cells are shifted a pixel or two to the right and overflowing out of the parent container.
I am required to keep the tables in there for something the programmer I am working with needs. Can anyone help me get the content / text properly padded inside the box?
Thanks!
If you give any padding to div, the content of that div -> table will be shifted.
For giving padding to the text either give it to anchor tag or heading tags which contains you text.
h4 {
width: 90%;
}
.table.cat-table-item {
margin: 0 0 15px 5px;
}
Will do it.
Related
The pictures are supposed to have padding on around them, and the footer is supposed to be in the bottom right corner.
I haven't tried anything else because I'm not sure what the issue is.
check the comment below for the code, I have to display it this way in order to display what I'm talking about properly.
What it's supposed to look like;
https://college.cengage.com/nextbook/shared/computer_sciences/carey_9781305503939/images/83908-mod3-fig03-67-t3.png
I'll try my best, but like I previously mentioned, I can't properly explain the issue for I don't even understand what is causing it.
"Go to the DIV Container Styles section. Richard wants you to add some additional spacing between the images and the edge of the page body. To add this spacing, create a style rule that sets the right and bottom padding of the div element with the id container to 8 pixels."
div#container {
padding-right: 8px;
padding-bottom: 8px;
}
is what I did to try and fulfill this.
The only thing I can think of that could be affecting this is this;
div[class^="column"] {
float:left;
}
In the CSS code below, it appears that the background of divTwo has moved behind divOne. But the content of divTwo appears to have been left behind - why does the background of the div appear to move independently of the content?
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
margin:5px;
float:left
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
<div id="divOne">Div01</div>
<div id="divTwo">Div02</div>
result in Chrome
The content of divTwo is not moving independently. The content is text, so it's rendered in a line box.
Now while unfloated, uncleared blocks ignore the presence of floated elements that precede them, the line boxes that they contain don't. The line boxes will avoid the floated element and go either alongside the floated element or, if there's no space for them there, underneath the floated element.
In your example, there is no space alongside, so the text has gone underneath the floated element. But since you've set a fixed height for divTwo, there's not enough space underneath and yet inside divTwo for the line box either. So the text content overflows divTwo, hence the text appears without divTwo's background behind it.
From Mozilla provided Float Documentation
How floats are positioned
As mentioned above, when an element is floated it is taken out of the
normal flow of the document. It is shifted to the left or right until
it touches the edge of its containing box or another floated element.
So I imagine when you declare float for divOne but not divTwo, then divTwo is following the normal flow of the document which is the same position as divOne.
You may also find Documentation for CSS Display useful.
If you do want these inline, but do not want to declare float for divTwo you can use:
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
float:inline-start;
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
This is something quite frequently met in just simple HTML. In you current code, you are not using any containers, wrappers or rows. This leads for the elements to overlap, if you want them not to overlap, you should give them some positioning or padding. In the provided fiddle, I have added a padding of 50 px for the divTwo in order to increase it's box show it is seen better.
The main idea is that you never start simply writing code but carefully think about the positioning of each element on your webpage. A good practice would be to learn how to "stack" elements( That's how I call it, the term might not be correct). Another thing is that there are some certain front end frameworks which could teach you better by example how to do this.
Bootstrap, Zurb Foundation (But Bootstrap...I'm not sure how many people use Zurb)
Here's the JS Fiddle to see how exactly the div has changed:JS Fiddle
Like #ZobmbieChowder said, the logic of CSS float property is that you have a huge box which contains two smaller boxes, and now you want one is located on the left and another on the right. If you don't have the huge box first, the complier doesn't get human's logic which one shall be the left or right. It only makes sense for machine that you "define" a container first, then talk about its element position left or right.
Alternative to #jpat827 answer would be to either set div two's clear property to left or add an empty div after div one and set it's clear property to left. What
The clear property, if there is no space left for the unfloated element, prevents the unfloated element from going under the floated element.
When you clear the div two to left, then what it really does is that it places div two below the floated element.
let's say, div one was floated to right, then you would have to clear div two to the right, in order to bring it below div one.
If, there were three divs, out of which two were floated to left and right, then the clear property for the third unfloated div must be set to both so that it can clear past elements floated in either direction.
I hope this was helpful.
Thank You
I'm trying to understand how the line-height property in CSS works. I know that it sets the spacing between lines of text. What I don't understand is why, when you set line-height the same as the height of the container, it vertically aligns the text. For example, if you did this:
.btn {
height: 22px;
line-height: 22px;
}
And create an element with the "btn" class, the text in that element will vertically align to the center and I don't understand why. To me, it makes more sense for the first line of text to appear at the very top of the container, and the second line to be at the bottom, possibly overflowing, since that will be 22px down. Can someone please tell me why it works this way, because I don't feel like I can understand the line-height property fully unless this is explained. Thank you.
line height is the amount of space above and below elements. thats pretty much all I can tell you.
If you wrap the text in a div, give the div a height, and the text grows to be 2 lines (perhaps because it is being viewed on a small screen like a phone) then the text will overlap with the elements below it. On the other hand, if you give the div a line-height and the text grows to 2 lines, the div will expand (assuming you don't also give the div a height).
Here is a link that demonstrates this
.shorty
{
height: 12px;
}
.liney
{
line-height: 25px;
}
Line height is actually referring to the top and bottom vertical spacing between the phrases. The reason why setting the same height as the line-height as it will auto centralise the invalid spaces. Sharing the similar explanation to centralising the body using margin {auto 0}
You can play with the examples available in w3schools.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height
Ref:
http://www.w3schools.com/cssref/pr_dim_line-height.asp
It helps me to understand CSS3 syntax and attributes even more.
I hope my share could help you. :)
Edited: I just happens to find a better answers to your question in here: How do I vertically center text with CSS?
I'm designing a web page and have been banging my head over this for the last hour with no luck.
I'm writing a few paragraphs and want it to follow two constraints:
1) The div that it resides in needs to be centered, but I don't want the actual text inside the div to be centered. An example would be the links/text here: http://paulstamatiou.com/
2) I want to constrain the text to the size of the div, and when a line meets that boundary, it breaks the line wherever it is and simply continues with left alignment on the next line. When I shrink the window, I don't want to hide any of the overflow.
My <pre> tags have the class preformatted, which I've customized as
.preformatted {
font-family: monospace;
white-space: nowrap;
text-align: center;
}
Sorry for the noobish question, I've tried to find my solution elsewhere. I've been messing with the overflow, whitespace, and some other tags to no luck. There has to be an easier way to do this than individually spacing each line like I'm doing right now.
Not sure I understand your question, but you can center a div with margin: 0 auto without affecting the alignment of the text it contains. Each line of the text will break to a new line once it reaches the width of the div. Here's a jsfiddle demonstrating:
http://jsfiddle.net/Vx9K9/
1) There are couple of ways to center your div. One and old method is margin: 0 auto;. Also you can try position or margin which satisfy your needs.
2) If you want to wrap your text up when it exceeds the border of div, you need to use overflow:hidden; on your div object.
I have a problem with an horizontal white space that appears inside a div without any reason. I mean, I cant' figure out WHY it appears, it just doesn't make any sense.
Here's Fiddle
The layout should be two columns: one right and one left and the latter one is larger. The problem is that on the right div I see contents shown regularly, with all alignments well shown. On the left one, its contents are lower, I mean it seems like it has a padding-top of about 5px, but there's no padding at all. The white space is INSIDE the left table-cell div, because even with plain text inside it ("Lorem ipsum"), the text is shown lower than the contents inside the right div.
HTML code is:
<div id="main_contents_cage">
<div id="main_contents_left">
<table> ... some content ... </table>
</div>
<div id="main_contents_right">
... some other content ...
</div>
</div>
CSS is:
#main_contents_cage { display: table; }
#main_contents_left, #main_contents_right { display: table-cell; }
#main_contents_left { width: 742px; }
#main_contents_right { width: 246px; border-left: 1px solid #C6C6C6; }
I searched the internet and StackOv for anyone else with the same problem without finding anyone with the same issue. Similar, but not the same at all!
I tried giving border-collapse/border-spacing to all the elements (once each, then just the "table" one, then just the "table-cell" ones, then the three of them): nothing.
I tried changing the contents of the table-cell divs, without any different result (replacing the table with other divs, or just plain text....).
Anyone has any idea?
I experienced this same issue. I too was able to "fix" the issue by assigning "vertical-align: top" to the table-cell element. This only appears to be an issue in Chorme. For me, it was the right column only (rather the left like in your example)
Ok I figured out: I need to add "vertical-align: top" to the "table-cell" divs in order for the content to display with no white space on the top!
I know in the fiddles it works but I really can't make it work on my webpage, even with no CSS (just the one I need...). (FF 13, Chrome 20).
Thank you
The contents of the div with the class of "main_contents_left" have table tags that contain no children row or grandchildren cells, could that have something to do with it?
Here is a link to my jsFiddle, if you are interested