I have this div
<div style="overflow :auto ;height:480px" >
inside a table,
the content in the table is dynamically changing so the height of the div is not known.
It was working well, but now I want to use percent instead of 480px
I tried height:60% and height:30% but it doesn't work.
by doesn't work I mean that the tables goes down to the page. On other words, the div keep downing to the down.
why please?
Try the following:
HTML
<div class="dynamic">
your div content here
</div>
CSS
.dynamic {
width: 100%;
height: auto;
/* your other properties here */
}
Related
I know this is probably really simple, but i'm stuck on it for a while trying fiddle around with it.
Basically, this is my html setup :
<div id="main-div"><!-- Blue -->
<div id="sub-div"><!-- Red -->
<div class="content-div">
<p>This is the text. I need the button to be placed in content-div, which technically is, but it appers outside the div.</p>
BUTTON
</div>
</div>
</div>
Here is the fiddle with the CSS classes :
http://jsfiddle.net/03knuf7z/1/
What I'm trying to achieve is to have the <p> paragraph and <a> button both inside the sub-div surrounded by main-div
I've been trying to achieve this without a fixed content-div height, so I'm trying to put in height: auto; into my css hoping the content-div will stretch enough to cover both <p> and <a> elements, but that doesn't do the job, because the button still appears outside the content-div box, just like in the fiddle.
I can achieve the desired result by putting fixed height to the content-div, so if I'll change the auto in height: auto; to height: 150px;, it works and both elements, the paragraph and the button are in the box.
But thinking of responsivity on small screen devices, phone screens for example, I'd like to avoid fixed values.
Is there a way to do this without fixed height ?
You need to add an element with clear after the button with float.
You can add this to the HTML, or use the CSS :after pseudo-element to create a virtual element at the end of your content-div:
.content-div:after {
content:'';
clear:both;
display:block;
}
Updated fiddle
This can be fixed easily with a clear class. I have updated your JSFiddle.
I have added the following class:
.clear {
clear: both;
}
And this after your button:
<div class="clear"></div>
You can also use the :after property. Then you will have the use the following CSS:
.content-div:after {
display: block;
content: " ";
clear: both;
height: 0;
}
Add overflow-hidden; to .content-div.
.content-div{
font-size: 18px;
overflow: hidden;
}
I've been looking around all over, but I can't solve this, so I'm turning here.
I want to make a layout that looks like this:
The layout consists of three fields:
A header at the top with a fixed height, dynamic width, and vertically scrollable content.
Body below header, with dynamic width and height, with vertically scrollable content.
A sidebar to the right, with a fixed width, dynamic height, and no scroll. (This should remain fixed when you scroll the body content)
Dynamic height and/or width means it will resize with the window, not that it resizes with content.
If anything is unclear or there's any questions, I'll do my best to answer.
edit: one of my (very failed) attempts here: http://jsfiddle.net/uYTht/34/
html structure:
<body>
<div id="header">
header content
</div>
<div id="content">
body content
</div>
<div id="sidebar">
sidebar content
</div>
</body>
css code:
#header {
width: 100%;
height: 100px;
margin-right: 150px;
background-color: green;
overflow-y: scroll;
}
#content {
background-color: blue;
height: 100%;
overflow-y: scroll;
}
#sidebar {
position: absolute;
top: 0;
left: 100%;
margin-left: -150px;
width: 150px;
height: 100%;
float: right;
background-color: red;
overflow: hidden;
}
edit: David below helped me find the way. Basically what I had to use to make it work as I wanted was the calc()-function.
edit edit: Jack below came up with a solution that didn't use calc(), which I must say I prefer. Thank you all very much for the help!
I created a simple fiddle, that doesn't use calc (support isn't great - http://caniuse.com/calc, and then there's the big unknown of any performance penalty you may/may not hit using it..)
It's very straight forward, using simple CSS.
http://jsfiddle.net/ruYGH/3/
You can do this by using defined heights and widths for each of the elements with the overflow property.
To make a box scrollable (if the content doesn't fit inside):
overflow:auto;
To make a box not scrollable:
overflow:hidden;
Note that if the height and width are undefined, the element will grow to fit all of the contents.
I made a (not very pretty, but functional) example here:
JSFiddle
Edit:
You can make the sidebar a fixed width and adjust the other elements accordingly with calc:
.sidebar{
width: 200px;
}
.left{
width: calc(100% - 200px);
}
The JSFiddle has been updated to reflect this.
Style the divs with "overflow" to put the scroll bars where you want them and prevent them where you don't want them. You will also use overflow to specify what you want to happen to your content if it should happen to be too big to fit in your fixed width areas.
Chris Coyer is always a knowledgeable CSS resource
As far as the layout goes, it is a walk in the park if you use a two column table with rowspan="2" on the second column of the first row and only one column in the second row.
If you don't want to use tables (there is no good reason not to, but there are thousands of people that will look down on you if you do) then look at using divs with style="display: table...."
Once again Chris Coyer has an explanation
Thanks for the fiddle, your overflow css is working it is just that your header and content divs are 100% wide (full screen) and the scroll bars are conceptually under the sidebar. I need to sell you on using that table layout so that you can "dynamically" fix your dimensions so that the browser can know when to scroll instead of expanding the content down indefinitely to fit the size of the content instead of overflowing with the scroll bar.
I hope this one is solvable with CSS only. I have an element like this:
HTML
<a href="" title="">
<img src="" alt=""/>
</a>
The height of the <a> element is set using percentage relative to the body's height. The image inside should always have 100% of the height of the <a> element. This works fine with a CSS like:
CSS
a {
display: inline-block;
height: 20%;
margin: 0 5% 0 0;
text-align: center;
}
a > img {
height: 100%;
}
The problem I'm facing now is the following: When resizing the window, the image gets scaled correctly, as the <a>-element gets a correct new height. Unfortunately the <a>-element keeps its initial width. This means, that the margin gets useless and the elements start overlapping or drifting apart.
The effect
You can see the effect in this image:
Demo
You can try it yourself
Question
Is there any way I can solve this in a way that the parent element has always the width of its content? When I reload the page with the new height after resizing, obviously everything fits again.
Use div tag.
Create a separate division of your content.
Then you can customize all the things as much as you can.
I solved it for the moment like this:
CSS
a {
margin: 0 1% 0 0;
background: red;
text-align: center;
}
a > img {
position: relative;
height: 20%;
}
Demo
Try it yourself
You can do it with jquery
http://jsfiddle.net/Rjk8U/4/
$(window).on('resize', function() {
$('a').css('width', $('img').width());
});
I am just setting the width of the anchor to the same as the width of the image. I could not figure out how to do it with only CSS
Note: I understand that you want the page to be 100% height but the blocks you have I assume is within the page, so why can't they be based on width percent instead? If you base it on height then when you only change the width of the page, the image does not resize
im trying to use a "fake" table using divs.
The structure of the fake table is simple
<div id="fatable">
<div id="fatable1"></div>
<div id="fatable2"></div>
<div id="fatable3"></div>
<div id="fatable4"></div>
<div id="fatable5"></div>
<div id="fatable6"></div>
<div id="fatable7"></div>
<div id="fatable8"></div>
</div>
#fatable {
width:100%;
white-space: nowrap;
}
#fatable1, #fatable2, #fatable3, #fatable4, #fatable5, #fatable6, #fatable7, #fatable8 {
float:left;
}
My problem now is that the element called #fatable3 must expand it self so #fatable always reach the 100% of the possible with..
#fatable3 is a search input field that will be "elastic" so each time the with is 1900px insted of 1200 just for example this element must "grow" to #fatable reach the 100%..
i even have a jsfiddle, cause i remember this wasent so hard. but if set 100% width for #fatable3 then this elements take the 100% width of the page making #fatable like 175% really of the screen width.
http://jsfiddle.net/DDMMc/
Or do i have to move to a real table to achieve this?
Here is the simplified version of the jsfiddle, i need all to be just one Row, but when i set the 100% width for a inline element, it drops , cause it takes the 100% of the width not of the space left inside.. hope you can understand me
Here it is : http://jsfiddle.net/sU5Kx/
I should use the css code for div table layout. It is pretty clean.
I updated your fiddle here
a link
Serach for further information css div tablelayout.
#fatable {
max-width:100%;
width:100%;
white-space: nowrap;
display: table;
float:left;
}
I just made a guess and hope this is what you want..
Here is the fiddle Demo
Jus add this to your fatable3..
#fatable #fatable3
{
float:left;
width:100% !important;
}
this will change ua design but u can adjust other divs as u want...
How can I have div 'lower' fill the lower part of the screen with it's bg image?
Div 'upper' grows depending on the content.
The red line marks the viewport.
Here I have an example how I did it with a table : Splendid
But I want it tableless!!
Warning: This answer does not solve the original problem, I misunderstood his question. What the author wants to achieve is probably impossible with CSS only, because we have a combination of sticky footer, a footer-head that is always visible (like taskbar) and dynamic height of both the main content and the footer.
I'm leaving the snippet for anyone that might look for a sticky footer.
Fiddle: Dynamic Content with Sticky Footer
I used a timer to illustrate filling the 'Upper' Container with content constantly.
Basically you have the following HTML:
<div class="wrapper">
<div class="upper">
<span></span>
<div class="push">
</div>
</div>
<div class="lower">
Footer content goes there.
</div>
</div>
And of course, CSS:
.upper{
min-height: 100%;
height: auto !important;
width: 100%;
height: 100px;
background: blue;
margin: 0 auto -100px; /* The negative value of the footer height. */
color: white;
}
.lower, .push {
height: 100px; /* Footer and Push need to have equal height */
background: red;
color: white;
}
Code explanation:
This is basically the so called Sticky Footer concept on which you can do additional research. You have your main content, you have your footer and we use a little trick with the push container to literally push the footer so it doesn't overlap any of your content.
The extra CSS is just for the sake of the Demo, I hope you can clean it up and implement it the way you need it.
This is not precisely what you are asking for, but you could scrap the bottom div, and add the large background image to body. Apply background-position: center bottom; to make the image hug the bottom of the screen. This will work particularly well if the image has a clear background.
body {
background: url('largeImage.png') no-repeat center bottom;
}
Ummm just set the height of div 'lower'? Or even min-height if you want it to be content flexible.
You could use Javascript to subtract the height of the upper div from the browser's window height, and if the result is larger than 0, set the lower div at that height?
For getting the window size, I suggest using this function. I believe it's cross-platform, though I haven't tested it recently.
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}