I am trying to set the background color of my container div and all child div's within it but I can't get it to work for some reason, and I am unsure as to where I am going wrong.
When I set the background-color and a border on the container you can see that it is not actually "containing" any child elements.
#facility_container{
text-align: center;
padding: 2px;
width: 100%;
background-color: #ffffff;
}
Here is a JSFiddle demonstrating where I am at so far.
Add overflow: hidden to #facility_container, #facility_general_info, #facility_section_info
Float makes the inner divs not expand the outer ones. Using table settings to style your page is a big no-no in HTML5.
working jsfiddle: https://jsfiddle.net/nayish/docg128w/8/
The issue here is that, since your #facility_info divs are floated, they are taken out of the normal element flow, and therefore do not affect the width or height of the #facility_container div.
As suggested by Jon Ducket in his book HTML & CSS:
Set the container div's overflow property to auto, and its width property to 100%.
#facility_container {
text-align: center;
padding: 2px;
width: 100%;
background-color: #ffffff;
width: 100%;
overflow: auto;
}
In this case, since #facility_general_info already takes up width and height, it is not necessary to set #facility_container's width to 100%, but the above-mentioned property values can be used for elements that contain only floated elements.
Related
I'm using a table layout and attempting to set the height of the child of table-cell to be 100% of it's container. Why does this not happen and how do you resolve this?
I also tried setting the table-cell height to 100% without success.
I would like to align ONLY the images to the bottom of the container. How can I do that within a table display?
The amount of text in each table cell is dynamic
Fiddle: http://jsfiddle.net/3u3gpf2n/1/
It seems like you're trying to create a 3-column, 2-row table, but only using single rows in order to keep your markup semantic. Without flexbox, distributing the image to the bottom will require some CSS trickery.
One example, which should fit your requirements of (1) cross-browser, including IE, compatibility (2) allow for arbitrary text in the box is:
*{
padding: 0;
margin: 0;
}
#container{
width: 500px;
margin: 0 auto;
}
ul{
list-style-type:none;
display: inline-table;
}
li{
position: relative;
/* image width / (image height * column count) */
padding-bottom: 11.764705882%;
display: table-cell;
background: red;
/* 100 / column count */
width: 33.333%;
}
a{
color: white;
}
img{
width: 100%;
position: absolute;
bottom: 0;
}
<div id="container">
<ul>
<li><a href><div class="header">Xiao Huang</div>
<img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
<li><a href><div class="header">Xiao Huang</div>
<img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
<li><a href><div class="header">Xiao Huang Xiao Huang Xiao Haung</div>
<img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
</ul>
</div>
I've added a relative position to the LI, and absolutely positioned the Image. To ensure things work correctly, I've given the cells a percentage-based width. I've also added padding to the bottom.
The one thing that this doesn't include is the cursor all the way down. If the user clicks between the image and text, the anchor will not be triggered.
To fix this, consider removing the UL/LI, and styling the anchor tags as table-cells and the wrapping DIV (or NAV, if you have a JS shim for HTML5 tags) as table.
I'm using a table layout and attempting to set the height of the child
of table-cell to be 100% of it's container. Why does this not happen
and how do you resolve this?
I also tried setting the table-cell height to 100% without success.
When using percentage heights in CSS you need to specify the height for all parent elements, up to and including body and the root element (html).
From the spec:
CSS height property
percentage Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.
auto The height depends on the values of other properties.
In other words, if you have not set an explicit height to the containing block (and the child is not absolutely positioned), then your child element with percentage height will have no frame of reference.
So the problem in your code boils down to this: You're missing a height on parents ul, #container, body and html.
DEMO: http://jsfiddle.net/sedetcc6/
I would like to align ONLY the images to the bottom of the container. How can I do that within a table display?
Although vertical-align is well-suited for aligning elements in a table cell, in this particular case, because each image has a sibling that must not move, the vertical-align property is not useful.
But the images can be shifted with absolute positioning. Try this:
li{
display: table-cell;
background: red;
height: 100%;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
width: 33.33%; /* new */
}
img{
width: 100%;
position: absolute; /* new */
bottom: 0; /* new */
}
DEMO: http://jsfiddle.net/sedetcc6/1/
NOTES:
No changes to original mark-up
For the record, this problem could be easily solved with flexbox, but I understand it's not an option here due to a need for IE 8 & 9 browser support.
I hope I am understanding the problem correctly, but my advice would be to make each anchor display: table-cell so they are forced to the same height, and then you can position all elements inside the anchor or even use background images instead of <img />
JS fiddle here
All you need to need is set a height for all your elements, e.g.
*{
height: 50px;
}
You'll get your desired result: http://jsfiddle.net/asimplepeter/3u3gpf2n/10/
If the amount of text is going to be an issue, you can set overflow: auto for your .header class.
Your code and display properties like 'table' and 'table-cell' things are correct.
But, the problem is that tables are rendered with auto height only. Because of this, eventhough you had set your container height, the table structure was not rendered with the proper height. So, along with container class, set height for 'ul' as well
regarding the position of image, you can set your margin-top to 100% or by calculating the size of the image and reducing that from the 500px container height will help you in positioning.
Hope this answers your all queries
EDIT As setting the margin is expand the table height, alternatively you can use css property like below
transform: translateY(Y);
transform-origin: left top;
In this case, i would think it is better mantain the height of cell according to the img because it's static and set header as absolute.
Something like that:
li{
position: relative;
display: table-cell;
background: red;
height: 100%;
vertical-align: bottom;
}
.header{
width: 100%;
position: absolute;
display: block;
color: white;
background: blue;
}
http://jsfiddle.net/3u3gpf2n/12/
I am a bite confused on what is happening here. I put my body margin set to 0 in my css and then all the div elements stretch across the screen like I want, but I want this to apply for only one. From a previous question: HTML Image going across entire screen
An answer said to use position:absolute and then change the position of the div elements. I used to have position:relative on these div elements and when I changed that to absolute, it combined all the div elements in one position. I tried moving them with bottom:then whatever pixels, but still did not move it at all. Would this be the way to move it? What would I do? On W3 schools: http://www.w3schools.com/css/css_positioning.asp
It tells me a lot about positioning div elements, but when I tried to use this it did not work on one div element I tried, but instead overlapped it.
How would I move these div elements?
Code CSS
#middle-4{
position:absolute;
left:0;
right:8;
bottom:0;
top:-800px;}
Code HTML
<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>
This is done so for as you can see up to 4 div elements.
If I understand your question correctly you want all element to conform to the default body margin except one element (or multiple elements using a class).
I would do it like this...
Give body a specific margin to ensure it is consistent across browsers.
Use negative horizontal margins to pull your element outside of the constraints of body
body {
margin: 8px;
background: lightGreen;
}
div {
background: lightBlue;
padding: 30px;
border-bottom: 1px solid blue;
}
.fullwidth {
margin-left: -8px;
margin-right: -8px;
}
<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>
Setting margin on body only ensures cross-browser consistency as mentioned by uʍopǝpısdn
If you have 4 divs containing an image each, you should stick to position: relative - this will line up the divs / images vertically on top of each other.
Your issue might have to do with image sizes - if you want all images to keep their original size, you can keep their attributes for width and height as specified in your example "middle-4": height: 540px; width: 1348px;
However - do you want one div / image to stretch across the width of body / screen, you will have to apply the size in percentage - this can be done in 2 ways:
CSS3 - you have the options of "cover" or "contain", which can be applied to div as youre doing it now - example:
div {
background: url(images/Home/rock.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
CSS2 - you can apply a class to the image itself, and forget about the surrounding div - example:
<img src="images/Home/rock.png" class="img_width" />
.img_width {
width: 100%;
height: auto;
}
I have two elements, both with display: inline-block, and the parent has white-space: nowrap.
When the screen is resized, the div on the right side don't resize, like this.
I'm trying to make only the blue div resize.
Full source (jsfiddle)
The structure of the html is like this:
<div class="container">
<div class="header">...</div> <!-- red -->
<div class="aside">...</div> <!-- pink -->
<article>...</article> <!-- blue -->
</div>
Relevant css:
* {
box-sizing: border-box;
}
div.container {
margin: 0 auto;
max-width: 40em;
padding: 0;
white-space: nowrap;
}
div.container > * {
white-space: normal;
}
.aside {
display: inline-block;
max-width: 15em;
vertical-align: top;
}
.article {
display: inline-block;
max-width: 25em;
}
Old question, but for the sake of knowledge of anyone who reads this and also has the doubt:
What I've found is that setting position: relative on the .container
and position: absolute on the .article does what I want.
An absolute positioned element is positioned relative to the nearest positioned ancestor, where a positioned element means anything with a position property different to static, the default; if does not found any positioned element, uses the body element.
The absolute positioned elements, if has their width and heigth in auto, resizes to fit its content, and limits the maximun sizes by its positioned ancestor. You can check this putting a short string instead a large one: the element will shrink to the length of text. If you remove the positioning from div.container, the article (if still positioned absolute) will grow (depending on its content) to cover the space between previous element and body width.
And, related to the aforementioned and to add some utility to this delayed answer, a not-very-know bonus: if you define the right and left properties of a absoluted positioned element, and leave the width in auto, the element will cover the horizontal size between the right and left defined. This way you could put something like
article {
background-color: #a0f4ec;
display: inline-block;
position: absolute;
right: 0;
left: 30%;
}
div.aside {
background-color: #faf;
display: inline-block;
max-width: 15em;
width: 30%;
}
This trick also applies in a vertical sense, but with height, top and bottom properties.
There are a few ways to do it.
Method 1:
two divs the same line, one dynamic width, one fixed
Method 2 (negative margins)
http://alistapart.com/article/negativemargins
Unfortunately, Narxx's answers require the divs to be floated. I'm sure that's what you should do if you're building a real site, but in my case, I'm trying not to use it.
What I've found is that setting position: relative on the .container and position: absolute on the .article does what I want.
Simplified fiddle
If anyone can explain why, I'll mark it as an answer.
I'm trying to figure out css, one step at a time. Consider the following code:
<header id="main">
</header>
and CSS:
#main{
height: 220px;
width: auto;
border: 2px #000000 solid;
}
#title{
float: left;
background: url(http://i.imgur.com/m9fvwoJ.jpg) no-repeat;
width: 300px;
height: 175px;
}
If I remove the float-property, the picture 'disappear', and I'm having difficulties understanding why.
Heres is the code in JsFiddle => http://jsfiddle.net/5nWag/3/
An element automatically becomes a block-level element when its floated, so your width and height rules are applying and working as you'd expect. Inline elements can't have an explicit width and height, as their content determines the size of their line boxes. Inline elements also cannot have any vertical margin, borders, or padding. The reason the background disappears is because your <a> has no content and as a result, no dimensions and also because you apparently can't give an <a> element a background-image without modifying its display value. If you wrap a <span> around it and add content the background-image will be visible:
http://jsfiddle.net/5nWag/8/
I want to display 2 divs in a single line. I have a parent div and two child divs.I want to keep the width of first child div and parent div equal. So the header(label of first child div) displays always middle position of parent div and I want to display the second child div at the right side in the same line of parent div.(Condition is always label of first child div should display middle of parent div). Here is the jsfiddle.
If I were styling this header section for a website, and I wanted some flexibility in styling the various elements, here is out I would start.
For my HTML:
<div class="head">
<div class="innerfirst">
<h1>ABCDEF GHIJ</h1>
</div>
<div class="innersecond">
<label>RIGHT1</label>
<label>RIGHT2</label>
</div>
</div>
I would put the page title in a <h1> tag so that I can adjust font-size, padding, background color and so on. In fact, you could add a tag line below the title line and various background images. Having .innerfirst and h1 gives you quite a bit of flexibility.
The <label> tags don't make sense semantically in this context, but perhaps you will have have input fields later like a search box.
For the CSS:
.head {
background-color:#2191C0;
width: 100%;
height: 85px;
position: relative;
}
The above is fine, set position: relative so that you can use absolute positioning for one of the child elements. The fixed height is a good idea, makes it easier to adjust elements vertically.
.innerfirst {
}
.innerfirst h1 {
text-align: center;
color: #FCFCFC;
padding-top: 10px; /* You could also use a margin... */
}
By default, .innerfirst will have 100% width since it is an in-flow block element, same with the h1 element. You can center the text within h1, and adjust color, padding and margin as needed.
.innersecond {
border: 2px solid lightgray;
color: white;
position: absolute;
width: 25%; /* Set this or by default it will shrink-to-fit content */
height: 61px; /* Set this or by default it will shrink-to-fit content */
top: 5px;
right: 5px;
padding: 5px;
}
What you could do is create a box of text and absolutely position it to the right. It is a good idea
to set a height and width otherwise, as a result of the absolute positioning, the div will shrink to fit the content, which is sometimes useful. The top and right offsets will position the .innersecond to the top-right of the parent container because you set position: relative in .head.
.innersecond label {
display: block; /* optional if you want block behavior */
border: 1px dotted white;
}
Finally, if you want the label tags to behave like blocks, use display: block and style according to you design requirements.
For reference, demo fiddle: http://jsfiddle.net/audetwebdesign/qpb9P/
Here's an updated jsfiddle. Read up on the display property!