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
Related
i am working on an internal web page, the page have a wrapper DIV as recommended by a tutorial online.
inside the wrapper there is : header, mainnav, content, sidenav and footer.
The content and sidenav are two side by side DIVs .
The side bar contain a menu that is usually changed.
My problem is that i want to make the content DIV with the same height as the sidenav.
here is my CSS for the two DIVs
#content {
width: 75%;
float: left;
padding-top: 5px;
height: 100%;
}
#sidenav {
width: 25%;
float: right;
}
and this is the CSS for the wrapper
#wrapper {
background-color: #FFFFFF;
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
-webkit-box-shadow: 0px 1px 20px #999999;
box-shadow: 0px 1px 20px #999999;
}
Give both of them the following attribute:
height:100%;
They should fill the entire height of the wrapper div, if you give it a specific height. I'd also suggest adding another div after them, and then style it as below to prevent either from creeping past it:
width: 100%;
clear: both;
height 100% doesnt work if you dont have a parent with a defined height. I dont know why you want the same height? If it is for a background color just add it to your wrapper and overwrite the sidebar for example.
In the future you might want to checkout a framework to overcome problems like this. bootstrap is a good one to start with.
https://jsfiddle.net/dtz8cmnt/1/
.column {
float: left;
width: 33%;
}
.menu {
background:red;
}
.content {
background:blue;
}
.clear {
clear: both;
width: 100%;
}
In the Fiddle you find an example where a clear is used. Note that the colums do not have the same height.
Hi so i have a line that i want to put on my website. Although i have tried a few things like z-index, position: fixed ect. i can't seem to get the line to span the whole browser length, while still having the margin-auto width for the website 900px;. Is their anyway to "override" the margin width of 900 and for the line to span the whole website while being static. I have also tried taking the div out of the body tags and that didn't seem to work either.
.line {
position: static;
background-color: #d1d1d1;
width: 100%;
height: 1px;
margin-top: 20px;
}
body {
margin: 0px;
padding: 0px;
margin: 0 auto;
width: 900px;
}
If the line is part of your body then width:100% will make it 900px (the width you set on your body)
They way around is to set body width to 100%, and then create a wrapper (with width 900px) for your main content and a separate line div for the line across the full width.
Added a fiddle: http://jsfiddle.net/xrqezvxz/
your css would look something like:
body {
margin: 0px;
padding: 0px;
width: 100%;
min-height:500px;
}
.line {
position: fixed;
background-color: #d1d1d1;
width: 100%;
height: 5px;
margin-top: 20px;
}
.content_wrapper
{
width:900px;
background-color:red;
min-height:500px;
height:500px;
margin:0 auto;
}
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
I want to make a perfectly centered/responsive div.
How would I go about that? Typically to move things I float them or use position: absolute;, but I would like to do so in relation to the browser window as opposed to just generally moving things around.
This will center the div horizontally:
#yourDiv {
margin: 0 auto;
}
You can use margin: auto; along with absolute positioning for responsive vertical/horizontal centering:
<section></section>
section {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #f4d4c4;
height: 100px; /* The only caveat is there needs to be a height defined */
margin: auto;
width: 100px;
}
Example: http://jsfiddle.net/uLDVM/
Here s fiddle that centers it both horizontally and vertically
div {
width: 100px;
height: 100px;
border: 3px solid red;
margin: 50% auto;
}
This is what I use.
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
The best method using CSS would be to use margin and a max-width to control its width. Like this:
div {
max-width: 50px;
margin: 0 auto;
}
Now to change its value on the browser resize, either use media query or you can use %.
Media Query
#media only screen (max-width: 800px) {
// change the properties if the screen is no
// larger than 800px in width
}
Percentage
div {
max-width: 5%;
margin: 0 auto; // will only align it horizontally
}
You can use position: absolute and then use 0 for each four sides of it. To keep it centered and strecthed to the borders, while it won't strecth because of max-width.
This way, you will have the div centered and responding to the browser.
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.