i am kind of new to designing stuff which is why i want to learn a bit about it..
I am having an issue with my website, what css can I use to make a Div acting as a wraper grow in terms of height as the content grows? My content is being hidden underneath the footer... as it grows
Thank you
css
.wrapper
{
width :1200px;
height: 1000px;
margin-left: auto;
margin-right: auto;
overflow :hidden;
background-color: white;
}
Change this:
.wrapper
{
width :1200px;
height: 1000px;
margin-left: auto;
margin-right: auto;
overflow :hidden;
background-color: white;
}
to this:
Change this:
.wrapper
{
width :1200px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
Your request is not entirely clear, but you could use min-height to make an element have a minimum height:
.wrapper {
width: 1200px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
http://jsfiddle.net/uQjEn/3/
And:
http://jsfiddle.net/uQjEn/2/
Never, ever use overflow: hidden with an explicit height. I know all the cool kids are using that to contain floats but you can't combine that with a height set.
Remove the overflow property or the height property.
Related
Is it possible to have a two column layout whereby one of the columns has a min-width value? Please see the code below:
#container {
width: 100%;
max-width: 1200px;
min-width: 960px;
height: 600px;
margin: 0 auto;
}
#sidebar {
float: left;
width: 20%;
min-width: 300px;
height: 100%;
}
#content {
float: left;
width: 80%;
height: 100%;
}
The problem is that when the window is resized and #sidebar gets the min-width value applied, #content will drop off the page.
Ideally I would like to do this without having to use display: table and ideally a CSS only solution would be preferred.
EDIT: Here is a jsfiddle to demonstrate the issue: http://jsfiddle.net/2DwB3/
You can do this: http://codepen.io/anon/pen/GmwIo
#container {
width: 960px;
height: 600px;
margin: 0 auto;
overflow: hidden;
}
#sidebar {
float: left;
min-width: 300px;
height: 100%;
}
#content {
}
The #content column is collapsing (even in full screen size) because min-width value of the left column (#sidebar) exceeds its width value, Hence the remaining space for the right column (#content) is less than 80% of the width of the #container.
In this case the width of the #content should be changed base on the width of the #sidebar. But as you have used min-width property for the sidebar, if you set a lower value than the width value (something like 150px), It'll be impossible to calculate the width of the #content even by using CSS3 calc() function.
Alternatively, you can stop floating the right column and hide the extra horizontal overflow by overflow-x: hidden; to achieve the desired goal:
#sidebar {
float: left;
width: 20%;
min-width: 300px;
height: 80%; /* Changed for the demo */
}
#content {
height: 100%;
overflow-x: hidden;
}
WORKING DEMO.
I am trying to make it possible to align divs with a lot of text horizontally, so you can scroll through them horizontally. Not really experienced and I can't figure out what I am doing wrong..
Here is my css:
#content {
font-size: 18px;
text-align: justify;
display: inline-block;
vertical-align: middle;
overflow-x: auto;
height: 70%;
margin-top: 15%;
margin-bottom: 15%;
}
.item {
width: 50%;
max-height: 70%;
margin-bottom: 30px;
margin-top: 100px;
margin-left: 25%;
margin-right: 25%;
overflow: scroll;
}
Thanks!
I assume you want to put multiple .items into the #content and they should then wrap horizontally. Is that correct?
You would then need a wrapper over your #content that has a fixed width (this is going to be your 'scroll window'). The #content itself needs to be wider so that you can scroll it while the wrapper needs the property overflow-x:scroll. Since you don't know how wide your #content should be (except if you know the number of .item divs) I suggest to set it with Javascript. Finally it's important to have float: left in your .item, otherwise they won't wrap horizontally.
Additionally you could let JS set your #contents height to the heighest .item if you don't want this to be same for all .items.
Take a look at this fiddle if this is what you try to achieve.
Optionally you could use css3 columns. However you wouldn't yet use it, as you won't have any support for IE9 and below. See here how this works.
Cheers!
My situation:
On my page I have multiple collapsible panels in the right hand column of my main content.
At the moment what happens is when I expand the panel (which contains a large amount of text) it goes off the page.
Therefore meaning that the user can't read it. This due the fact that the height is hard coded.
Now what I want to happen is when the div expands, if it reaches the max height of the page, the page height expands to incorporate all of the text.
Question:
Is there a way to make it possible that the page height expands along with the div?
My CSS:
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
#page {
overflow: hidden;
width: 900px;
padding: 0px 50px 50px 50px;
background-color: #FFFFFF;
}
#content {
float: right;
width: 580px;
}
Thankyou for any suggestions
Instead of using height you could try to set position to "absolute" and 0px top and bot on the .container?
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
top: 0px;
bottom: 0px;
}
You can make .container a clearfix so it will expand to the size of the floated element inside of it. Here's a great article on using clearfix.
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
That code will work for everything outside of IE6&7. If you need tose too just take a look at the article.
Never mind guys, I solved it....It was due to the fact that i was positioning the div with a relative height and width, so i just used margin-top instead.
Thanks to everyone
I have a content div. I want it to be atleast 90% of the screen.
I currently have:
min-height: 400px;
height: auto !important;
height: 400px;
in my #content div's css.
Changing to 90% did not work.
Is there some way to do this?
Essentially it will always run 90% down the screen unless something makes it bigger than 90%.
Thanks
You need to set html and body to fill 100% of the height, look at this fiddle: http://jsfiddle.net/promatik/KhCb6/
html, body {
height: 100%;
}
#myDiv {
min-height: 10px;
height: 90%;
background-color: #CCC;
margin: 1px;
}
Your height:auto !important is killing it. Remove it. Also, I would suggest using this method:
height:90%;
min-height:400px;
Depends how you're going to have the content, you can fake this by letting the overflowed content have the same background. For example:
#mainDiv {
min-height: 10px;
height: 90%;
background-color: #ddd;
}
#mainDiv p {
background-color: #ddd;
}
This way, your overflowed content would "look like it's expanding" with the div. Not ideal, but this gets what you're trying to achieve.
you need to set min-height of Div ie min-height:90%;
#mainDiv {
min-height: 90%;
background-color: #ddd;
}
Hi I am having trouble getting a div to stay in place when the window is resized. It overlaps the content div when its made smaller.
#content
{
width: 70%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
background-color: #202020;
padding: 30px;
}
#login
{
float: right;
margin-right: 20px;
margin-top: 50px;
background-color: #4A4344;
width: 200px;
height: 220px;
text-align: center;
}
I tried to set the values to em and percentages but I cannot seem to get it working.
Thanks for any advice.
This is because the content div's width is set to 70% of the browser's window, and will ignore the login div entirely. Try instead to float both the elements. If you set both element's css to float: right;, put the login before your content in the html, and remove the width property from the content's css, then it should view how you want it.
Try white-space: nowrap