#userIDTableCell
{
border-style:solid;
border-color:#000;
border-width:0px;
min-height: 130px;
}
When I use the min-height attribute, the top div overlaps the bottom divs.. but when I remove it, then the bottom divs will move proportionally with the top div; which is what I want to happen when I set a min-height value.
The research I've done and the things I've tried don't seem to work. I've tried setting the other div's to relative and that doesn't work. Not sure how else to override this. I've also tried setting the div as a float..
You should set your height to auto if you are using the min-height attribute.
#userIDTableCell
{
height: auto;
border-style:solid;
border-color:#000;
border-width:0px;
min-height: 130px;
}
Related
I have a main div that contains two other divs. I need that the first one must have the same height of the parent div. The parent div height is not specified in CSS.
Here's an example: http://jsfiddle.net/x8dhnh4L/
The pink div must expand to the full height of the parent (red border).
One solution I tried is using display:flex, but it's not IE-friendly (I need a IE8+ compatibility). Plus I'd like to achieve this with CSS only, so I'm avoiding JS.
You could try using a table layout:
set display:table on the parent
set display:table-cell to the childs that need the same height
#container {
position: relative;
width:600px;
border: 1px solid red;
display:table;
}
#content {
display: table-cell;
background-color:pink;
width:400px;
}
#side-bar {
display:table-cell;
background-color:yellow;
width:170px;
padding-left:25px;
vertical-align: top;
}
here's a working fiddle:
http://jsfiddle.net/x8dhnh4L/2/
As noted in the comments, margins do not work in elements with display:table-cell. If acceptable, you can use padding-left instead of margin-left...
You could also add an additional <div> to separate the 2 columns by 25px.
http://jsfiddle.net/x8dhnh4L/1/
Set side bar to
float:right;
and set content
height:100%;
A quick solution is to use display:table for #container and height:100% for #content.
http://jsfiddle.net/afelixj/x8dhnh4L/5/
If you actually want the "#content" div to expand to "#container" height, you need to set a height for parent div "#container" and height and float for "#content"
#container {
position: relative;
width:600px;
border: 1px solid red;
height: 800px; //whatever height you need
}
#content {
display: inline-block;
background-color:pink;
width:400px;
height:100%;
float: left;
}
This way "#content" height will adjust to "#container" height, but "#side-bar" will take the height it needs to show it's content.
With Hanoncs solution the parent div "#container" will adjust to child's div "#content" height.
An easy way around this is using display: table; declaration on the parent element and display: table-cell; declaration on the child element.
I would recommend reading Equal Height Columns with Cross-Browser CSS and No Hacks.
Hope this helps!
I have a parent, .mainWrap with 10px padding, but my input with width 100% doesn't wrap properly?
It stretched out at the right side, but it align fine with the padding on the left.
FIDDLE
input[type="text"], input[type="password"] {
width: 100%;
padding: 8px 10px;
border: 1px solid #DDD;
display: block;
margin-bottom: 8px;
overflow: hidden;
margin: 0 auto 8px auto;
}
You need to add:
input, label, button, div{
box-sizing:border-box;
}
This is because, by default, the box-sizing is content-box. This means that the element width is actually 100% + the padding.
Using the css
box-sizing:border-box;
Might work, but it is not compatible with, i think, IE 7 and down. Instead, since your inputs apparently are trying to occupy the full width of their wrapper, consider
display:block; width:auto;
Here's an article explaining it. The gist is that "width:auto" will occupy its parents width while including its own padding and border. "Width:100%" on the other hand just makes sure that the elements inner width is the same width as its parent, and the padding and border is extra.
Width:auto only works on block-level elements, like a typical "div" or "p", so simply making the inputs block level elements and applying width:auto instead of 100% should do the trick
How to horizontally center a div of 10000px (or others wider than full screen) in CSS?
e.g.
#widerdiv{
width:10000px;
height:100px;
border:#009933 1px solid;
}
it seems "margin: 0 auto" doesn't work in this situation
Try add similar to
position: absolute;
left: 50%;
margin-left: -5000px;
As ridiculous of a width as that is.. I have two solutions for you.
The margin won't work because it has nothing to align itself with so here are two possibilities.
First Solution: Use a div to wrap it. The JsFiddle and the code below:
<div id="wrapper">
<div id="widerdiv"></div>
</div>
CSS for first solution
#wrapper{
width: 1000px
}
#widerdiv {
width:500px;
height:100px;
border:#009933 1px solid;
margin: 0 auto;
}
Second Solution: Define your body width. The JsFiddle and the code below(which is only CSS because I would not have modified your HTML) :
body{
width: 1000px
}
#widerdiv {
width:500px;
height:100px;
border:#009933 1px solid;
margin: 0 auto;
}
Now, by all means necessary, you can make that width as big as you want (heaven forbid the horizontal scrolling...) but if you play with those JsFiddles, you are going to realize that you absolutely need to define a width of whatever this Div is inside of.
Last, the Almanac is going to be your friend on this one. And as a quick breakdown, incase you decide to try vertical positioning, this is what happens when you use 'margin: 0 auto;' in CSS:
"The element is given a specified width
The left and right margins are set to auto
Without the specified width, the auto values would
essentially have no effect, setting the left and right
margins to 0 or else to whatever is the available space
inside the parent element.
It should also be pointed out that auto is useful
only for horizontal centering, and so using auto for
top and bottom margins will not center an element horizontally,
which can be confusing for beginners."
The quote above is also referenced in the Almanac.
I'm trying to create an element whose side will line up with the parent's side, regardless of how much padding the parent has.
Normally, I know the padding of the parent, so I'd just have something like this:
<div style="padding: 20px">
...other contents...
<footer style="margin: 0 -20px -20px"></footer>
</div>
That only works because I know the parent element has a padding: 20px.
Is there a way to stretch the footer to the appropriate size without knowing the padding of the parent, without javascript?
jsfiddle here.
EDIT: The footer needs to cause the parent container to become larger in order to fit all the content AND the footer. Because of this position: absolute; likely wont work.
When you do padding, you are telling to its contents to expand doest matter what like in the second case. In the first case you had to add padding to both and then they line up.
To solved i use position:relative in the parent div and then in the footer i use position:absolute.Here the result: http://jsbin.com/arosuz/1/edit
When to use position :absolute inside a relative content, that tell it that now its content will be his parent container(relative).
Here a good tutorial:
http://learnlayout.com/position.html
CSS:
article {
background-color: #eee;
margin: 20px;
position:relative;
}
article:after{
content:' ';
display:block;
width:1px;
height:40px /* Height of footer */;
clear:both;
}
footer {
background-color: #ddd;
position:absolute;
text-align: center;
width:100%;
left:0;
bottom:0;
padding: 10px 0;
/* this only works for a container with
* padding: 20px;
* How can this work for a container
* any amount of padding, without
* javascript? */
}
http://jsbin.com/arosuz/4/
If your interested in the parent div padding CSS value you could also use this.
var padding = $(this).parent("div").css("padding");
I want to set background-color:#000 for the whole .content div. I have made a frame for an image and it wraps the image perfectly ( http://jsfiddle.net/Yuaq8/ ), but only if the position for the frame is set to absolute. In this case .content is not filled correctly.
If I remove the position property that belongs to .pic-frame in this fiddle , the .content div is filled, but the frame looks weird. How can I make the frame look like the one in the first fiddle, so it fills the entire .content div?
position:absolute will remove your element from the flow. Use position:relative or display:inline-block instead on .pic-frame:
.pic-frame {
display:inline-block;
padding:12px;background-color: #DDD;
}
Demo
Try setting a width for .pic-frame.
JS Fiddle
Or you can set width to 200px in pic.frame div and remove the width and margin property from #pic div.
.pic-frame {
width: 200px;
padding:12px;background-color: #DDD;
}
#pic {
height:200px;
background-color: #999;
}