I have a situation kind of like this =>
https://codepen.io/anon/pen/pQpLqY
since my #sub-header-content has no fixed height and can grow when user interact, I would like to be able to not set the height of #sub-header-content manually, but make it automatically fit the child size.
#sub-header-content{
background-color:purple;
height:40px; // WANT TO REMOVE THIS
}
#sub-header-menu{
position:fixed;
height:40px;
width: 50px;
margin: auto;
background-color:green;
}
I did not understand perfectly what you wanted, but I think setting min-height: 40px would do the trick.
Related
I am designing a fluid page which requires:
parent: 80% (of the screen)
container contains x number of images, width:10%, float left.
The container needs to be autosized as wide as the content, max-width is 50% of the parent.
I have tried different techniques to set display to inline-block, and attached the jsfiddle here. http://jsfiddle.net/7D9XS/
#parent
{
width: 80%;
}
#container {
max-width:50%;
border:solid 1px red;
display:inline-block;
}
.uploadItemPreviewThumbDiv
{
width: 20%;
margin: 10px;
background: cyan;
float:left;
}
.uploadItemPreviewThumbDiv img {
width:100%;
}
OK, Here you go...
.uploadItemPreviewThumbDiv
{
width: 70px;
margin: 10px;
background: cyan;
float:left;
}
JSFiddle!
Remember, the problem here was that the whole of the talk was going on in percentages.. and percentages tend to be one of the most unreliable things that you can come across while developing responsive designs, and on a side note, if I were you i'd use jquery plugins like Isotope or http://mixitup.io/
And Yeah, this is as far as i know, maybe someone could explain quiet better clearer..
Ok Let me try to put it this way...
This is sort of a paradox, where your conditions are..
You want your innerelements(content) to be of a certain percentage
width of the container.
But on the same time you dont want to specify what the width of the container would exactly be.
Because you want the container to be "autosized as wide as the content"
Which again brings us back to the 1st point.
It is like both the 'container' and the 'innerelements' are arguing over who should take the responsibility of being a specific width First, and each one is telling the other to attain a specific width, so that he himself can then adjust his own width based on that.
I am trying to bring the .day_line columns on the bottom of .lines_container. I tried to set extra .lines in the .day_line colmn and give them
position:absolute;
bottom:0
and to parent
position:relative;
but it doesn't push the lines on the bottom...
Any reason/solution?
My codes here http://jsfiddle.net/BqDfn/
Thnx!
If the container is going to keep that fixed height, you could do this:
.day_line {
height: 100%;
}
I didn't understand your question very well, but i guess you want those strips to go all the way down, if so set the Height: 100%
.day_line{
float:left;
margin-left:50px;
position:relative;
width:10px;
height:100%; // Changed to 100%
background:red;
overflow: hidden;
}
I'm trying to place 6 images one next to another with css,
the whole thing should be able to scale pretty well in most displays (except for mobile for the moment)
so I've made this:
http://pelloponisos.telesto.gr/galleryTest/test/gallery.php#
(apparently I'm trying to make yet another carousel)
most of my images have a bigger width than height so when I scaled them I just put
width:x% in the li container and 100% for the image width.
but the sixth image is different and it causes quite a bit of trouble
I tried setting the height too but you can only scale the images based on one of the two.
The only thing that worked so far was to put a static height in the ul and then scale in both width and height but then it's not a fluid grid.
is there any way to make all li elements have a fluid height and then scale all images based on that? or if not
is there any way to make any image with different ratio scale to the one I specify in the css?
I stripped down your code a little bit, but this seems to get closer to the idea. The trick is to set the width in the container (.upper ul li) then for the images use: max-width:100%; height:auto. Also, the padding is now in %.
#carousel{
position:relative;
}
#wrapper{
margin:0 auto;
}
#slides{
width: 100%;
}
.upper ul li{
width: 200px;
max-width: 100%;
list-style:none outside none;
float:left;
padding-bottom:5px;
padding:2%;
}
img.galleryThumbnail{
max-width:100%;
height:auto;
}
.info{
display:none;
}
#buttons img{
position:absolute;
top:90px;
}
#buttons #prev img{
position:absolute;
left:29px;}
#buttons #next img{
position:absolute;
right:21px;
}
My container div doesnt expand vertically on one of my pages as I add elements. Hence the bottom most div overlaps onto my footer. The divs in the container are horizontal elements relatively positioned
On my home page it works fine container expands and no overlapping using the css below
If I had any hair left it would be pulled out by now!! :-))
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
height: auto !important;
min-height: 100%;
}
Seems to me to little context, because it is possible that the footer is overlapping your container div, which is set to start with a min-height of 100%, it depends on how the footer is defined related to your container div.
...............Demo
Hi now give to body, html height:100%; than give to any class or id height 100%;
as like this
body, html{
height:100%;
}
LIve demo
rule-selector
{
height: 100%;
}
If this doesn't work for you then a more particular rule might disable this rule, so make your rule-selector as particular as possible. If it is still not particular enough, then:
rule-selector
{
height: 100% !important;
}
Try this:
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
overflow:hidden ;
}
Best,
Cynthia
I am showing a list of clients on a page and on the right side i have a calendar showing to schedule a new date for appoinment. When testing the output i found that if there are lot of clients coming on that day, the list exceeds the length of the container. What to do about this..
some code:
container:
#container {
background-color: #FFFFFF;
margin:0 auto;
min-height: 600px;
width: 900px;
border:0px solid #999999;
margin-top:30px;
font-size:15px;
color: #000000;
margin-bottom:60px;
position:absolute;
}
#calendar {
margin-left:400px;
}
Do you want #container to expand at all?
If not, change min-height to height, and add overflow:hidden;
An even better solution would be to modify whatever is supplying the data so that you only receive a pre-determined number of clients at any given time.
Use min-height. Example:
min-height: 300px;
If you specify this style, the element will be 300px high, or tall enough to contain its contents - whichever is higher.
(Note that not all web browsers work with min-height.)
Is overflow: auto; what you're looking for? If the content exceeds the size of the container, it adds scroll bars.