is there a simple css way to achieve the following layout?:
here you can see 2 div containers which are 100% in height. The right div is for menu and is 200px in width. And the left div should be also 100% in width but with a 200px margin-right (this solution is not working for me :/ ) at least not in all browsers.
If it is not possible, can anyone recommend maybe a jquery plugin?
You do like this :
CSS
.right{
float:right;
width:200px;
height:100%;
background:red;
}
.left{
overflow:hidden;
background:green;
height:100%;
}
html, body{
height:100%;
}
Check this http://jsfiddle.net/RDyY5/
https://stackoverflow.com/a/13726054/14493760
In searching I came across this and it worked far better for me than the solution listed above
Related
I have a main div that it re-sizes with re-sizing window. I want to add 2 div inside the main div (float left and right). left one width is 165 and right one width is the rest size of main div. can I simply use something in CSS?
#leftDiv{
height:100%;
width:165px;
float:left;
background-color:#244378;
}
#rightDiv {
height:100%;
width:100% - 165px;
float:left;
background-color:#244378;
}
If you really want do it this way, you can use the CSS3 calc property, but keep in mind that this isn't supported in all browsers:
#rightDiv {
height:100%;
width:calc(100% - 165px);
float:left;
background-color:#244378;
}
No! you cannot use a value like "100% -165px".
Instead you can just remove "float:left" and "width:" from #rightDiv.
That should work for your case.
You have to remofe float:left from #rightDiv and set width to auto in this way:
#rightDiv {
height:100%;
width:auto;
background-color:#ff0000;
}
If you do this, the right div will always appear near the left div and will have a dynamic width.
Take a look at this: http://jsfiddle.net/b9BrB/1/
i know, this is an old question but i can't get this to work...
see here: http://jsfiddle.net/NLRqM/2/
i want to have the "#main_rechts" DIV to be 100% height inside of "#main"... (automatically the same height as the green box)!
thanks so much!
Your #main-rechts is floated so it will not work. Try playing with display: table and display: table-cell CSS properties, but please note that they will not work in IE 7 and lower.
I've updated your fiddle to show what I mean - http://jsfiddle.net/Pharaon/NLRqM/5/
Try to give them both a min-height: 200px; (or any other value fitting your design):
#main_links {
width:680px;
position:relative;
float:left;
background-color:#096;
min-height:200px;
}
#main_rechts {
width:260px;
position:relative;
float:right;
background-color:#e7e8e8;
min-height:200px;
}
set some fixed height to #main and add height:100% to #main_rechts
You #main has no fixed height do you want to have 100% of what? :) Set some fixed height to #main
I need to achieve subject, and really got stuck. To better describe, I've put up a picture of what I need to get:
At first I've tried to do it with divs, but it looks completely different in Firefox due to width attribute. Although my primary concern is IE8 non-standard mode (that's requirement), I wanted it to look more or less decent in Firefox.
Then I tried to do it with two-column table, and it works well in IE and somewhat well in Firefox, but for some reason if the right column content gets wider than screen, table does not accomodate and my content is cropped horizontally by the table, no scrollbar is shown.
Also, looked at the earlier posts on Stackoverflow, with fixed container, but it doesn't seem to work in IE8 non-standard mode.
Would be glad to hear any ideas on how this could be done.
May be you can do like this:
.left{
float:left;
position:absolute;
width:200px;
background:red;
border:2px solid #000;
top:200px;
bottom:0;
left:0;
}
.right{
overflow:hidden;
background:green;
position:absolute;
top:200px;
bottom:0;
left:204px;
right:0;
border:10px solid #000;
}
html, body{
min-height:100%;
height:100%;
}
.header{
width:100%;
height:200px;
background:yellow;
}
Check this http://jsfiddle.net/QHTeS/
This should help - a very basic example.
http://jsfiddle.net/pRAgY/
Remember to adjust the width of the right container when you know the width, as the 6px border (totalling 24px) goes over the 100% width avalible.
I was trying to horizontally center an image (logo) for every screen size doing something like this
#container {position:relative width:100%; height:100%;}
#logo {position:absolute; top:0; left:50% width:500px; height:100px;}
and it's not working. Do I maybe have to use a width for container in pixels?
#logo {margin-right:auto; margin-left:auto; width:500px; height:100px;}
#logo { height:100px; margin:0 auto; width:500px; }
This is the standard way of centering an image by telling it to automatically determine the space on both the left and right of a fixed size container.
And an example.
I guess it depends on how you define "responsive", but if you mean responsive in the sense that content resizes to accomodate the width of the viewport, then all of the other answers don't meet this criteria since they rely on fixed pixel widths. For example, what happens if the view port is less than 500px?
A similar concept will work with percent widths, and actually be responsive, in that the thing you're centering will be flexible too:
#container { width:100%; height:100%; position:fixed; left:0; right:0; z-index:100;}
#logo { position:fixed; width:80%; z-index:101; left:50%; margin: 10% auto auto -40%;}
If you don't want the "logo" element to get to big (on huge screens), you can add max-width:600px; to limit it, but you'd need to add some media-queries to keep it properly centered on large screens.
My problem is that I have one div nested inside another large div. The larger div is called content, and the smaller one is content-middle. The content div is the first (and only) element inside the tag, and is properly resizing. The CSS is as follows:
body, html
{
height:100%;
margin:0px !important;
padding:0px;
background-color:#003A69;
}
#content {
width:100%;
min-height:100%;
position:relative;
background-color:#00693E;
background: url(images/background-green.jpg) repeat;
}
#content-middle{
background-color: white;
margin:0px auto;
width:930px;
height:auto !important;
height:100%;
min-height:100%;
color:black;
}
The HTML structure is like this: body->content->content-middle
The problem is that in Firefox, the div content-middle does not resize to the size of its container (100%) even if i put in something like 10000%. However, if I were to put a number in for min-height (such as 10000) it resizes properly.
This works properly in Opera, IE doesn't work (not surprising), havn't tried anything else. Is this a bug? Can anyone figure out a workaround?
Thanks in advance!
Change #content to 'height' instead of 'min-height'.