I have a two columns layout, two of them have a 100% height. So far so good.
The issue rises when the left column (example below) content expands as a result of
a drop down menu.
Take a look at the markup below. I intentionally set another div inside the left one
to illustrate the right box is not expanding according to the left one.
<!doctype html>
<html style="min-height:100%;height:100%">
<head>
<title>test</title>
</head>
<body style="min-height:100%;margin:0;background-color:#ccc;height:100%">
<div style="width:30%;background-color:green;;float:left;min-height:100%"><div style="height:900px">Green</div></div>
<div style="width:60%;background-color:red;float:right;min-height:100%">Red</div>
</body>
</html>
What will be a good solution to get the right box to expand in height; whenever
the left one does?
LIke this
demo
css
html,body{
height:100%;
}
.container{
display:table;
background-color:#ccc;
width:100%;
height:100%;
}
.green{
display:table-cell;
background-color:green;
width:50%;
}
.red{
display:table-cell;
background-color:red;
width:50%;
}
html
<div class="container">
<div class="green">green</div>
<div class="red">red</div>
</div>
OR
Help Full Links for you.
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
Related
Here is a code snippet showing the problem:
<!Doctype html>
<html>
<head>
<style>
.writingMode {
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
border: 5px green solid;
word-break:break-word;
overflow:hidden;
min-height:200px;
width:100px;
}
</style>
</head>
<body>
<div style="background-color:yellow; height:500px; width:200px; float:left;">
<div class="writingMode">
All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
<div style="background-color:orange; height:600px; width:200px; float:left;">
<div class="writingMode">
pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
<div style="background-color:yellow; height:700px; width:200px; float:left;">
<div class="writingMode">
All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
</body>
</html>
I would like all of the inner divs to be the same height, as dictated by the longest word in them. Instead, they are growing to the height of their parents, with the exception of the middle one in Chrome. Is there a CSS tag I could use to make them grow to the minimum height (above the given min-height) that fits all of the text based on a break-word word wrapping? It seems logical to me that what I have would do that but it isn't.
Edit:
The outer Divs (the big yellow and orange ones) should stay different heights, but the inner Divs should all be the same height because their longest words are all the same.
Thanks!
Remove the height form your parent element and the min-height from the children.
I made a fiddle. I hope this is what you mean?
.writingMode {
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
border: 5px green solid;
word-break:break-word;
overflow:hidden;
width:100px;
}
I am trying to make it so that the content box (Div) will automatically re-size when the browser width is changed.
The sidebar has a set width.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Wrapper">
<div id="header">
Stuff
</div>
<div id="sidebar">
Text<br/>Sidebar
</div>
<div id="content">
Stuff<br/>text<br/>Just to fill some space
</div>
<div id="footer">
Stuff
</div>
</div>
</body>
</html>
style.css:
#wrapper{
width:90%;
}
#header{
width:100%;
height:50px;
background-color:lightblue;
}
#content{
/* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
margin-top:4px;
background-color:yellow;
}
#sidebar{
width:100px;
float:right;
margin-top:4px;
background-color:pink;
}
#footer{
width:100%;
height:40px;
margin-top:4px;
background-color:red;
}
Note that this is just code I wrote while writing this question. All I done was missed out extra code that is irrelevant to the question.
This should (Not tested) show a header at the top, and a footer at the bottom.
The part that I need help with is the middle section.
When the browser width gets changed (Smaller of bigger), the sidebar will stay to the right.
I want the "#content" box to automatically re-size so that there is a gap in between the "#content" box and the "#footer" box.
I have tried css width % values but that doesn't work.
Can css do this?
If not, can I get any php or javascript that can do that?
Fiddle : http://jsfiddle.net/logintomyk/fQPse/
HTML (that you need to ammend) :
<div id="content">
<p> <!-- add a paragrap -->
Stuff<br/>text<br/>Just to fill some space
</p>
</div>
CSS (that you need to ammend) :
#content >p {margin-right:100px;margin-top:0px}
add overflow: hidden to #content. this makes it use the "rest" of the width, browser-width minus 100px for the sidebar.
if you want to have an extra gab between the sidebar and your actual content, add the following to #content:
box-sizing: border-box;
padding-right: 20px; /* (or whatever)*/
fiddle: http://jsfiddle.net/urEbY/1/
Sorry for not well-explained title, but I will try my best to explain the problem here.
There is probably a very easy solution to this particular problem, if i can call it that way, but I just can't figure it out with using only css.
Basically I have a parent ('wrapper') div which has min-width set and 2 floated children. As I am creating a dynamic page, user will be able to click on the 'right' floated div, and when he clicks on it new content will be added inside that div.
Problem occurs if the user wants to resize the browser after adding content to the div. Because the width of the main wrapper will be increased (when user adds content) when user tries to reduce the browser width (resize the browser) the 'right' floated div will go to the new line.
So my question is: Is there any way (css) to disable div from moving to the new line?
Here is the link to the jsfiddle: http://jsfiddle.net/LKgbx/30/
HTML:
<div id="wrapper">
<div id="left">I'm left</div>
<div onclick="changeText()" id="right">I'm right</div>
</div>
CSS:
#wrapper{
min-width:400px;
background-color:#A3F8A9;
display:inline-block;
}
#left{
float:left;
width:300px;
background-color:red;
}
#right{
float:right;
background-color:blue;
}
JS:
function changeText(){
document.getElementById('right').innerHTML="Just adding some text to make div longer";
}
<script type="text/javascript">
function changeText(){
document.getElementById('right').innerHTML="Just adding some text to make div longer";
}
</script>
<style type="text/css">
#wrapper{
background-color:#A3F8A9;
position:relative;
}
#left{
position:absolute;
left:0px;
width:300px;
background-color:red;
}
#right{
position:absolute;
left:300px;
width:100%;
background-color:green;
}
</style>
<div id="wrapper">
<div id="left">I'm left</div>
<div onclick="changeText()" id="right">I'm right</div>
</div>
Try removing float:right; from #right
#right{
background-color:blue;
}
Hey I'm stuck on a code with CSS, I'm trying to make a certain div 100% of the height and 25% of the width of the page and fill it up with a background, but it only works if there is text entered and it will adjust itself to the height of the text, not the page.
Hope someone could help me with this.
index.html
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<title>Height test</title>
</head>
<body>
<div id="menu">kaas</div>
</body>
style.css
body{
background:#fff;
}
#menu{
background:#000;
height:100%;
width:25%;
}
Thanks in advance,
Remy
If you are setting a DIV to 100%, it is going to adjust to the content of it. In this brief example you're showing up, there's no content, so 100% of nothing is nothing.
If you want this div to be based on the page size, you must specify it.
body{
width:900px; //example values
height:500px; //example values
}
#menu{
background:#000;
height:100%;
width:25%;
}
And I would recommend you to create another div to treat the page in general.
<body>
<div id="page">
<div id="menu">kaas</div>
</div
</body>
and then:
#page{
width:900px; //example values
height:500px; //example values
}
#menu{
background:#000;
height:100%;
width:25%;
}
Hi,
I want to create my own select box using css3 styles. I am using 1 input field and a down arrow for that.Total select box is in 1 outer div and image is in inner tag .I have to position that down arrow to right most to outer div so that it looks like select box.I am facing problem in aligning that image. I can position that tag by putting position:absolute for inner and outer tag both..If I dont put position:absolute to Outer div tag, the inner div tag is not positioned properly..(I dont know..why?).
But the problem is, if I put that, I must specify left and top for every select box(align manually).Its tough to do that if I have more that one select box in my application form.(In fact, its disgusting...)..So the inner div tag must be aligned right most to outer tag without positioning outer div tag....I hope I m clear... Please help out from this issue..
Here is my sample piece of code....
<!DOCTYPE HTML>
<html>
<head>
<style>
#Outer{ width:155px; height:20px; *position:absolute; border:1px solid #336633; }
#In{ position:absolute; right:0px; height:100%; width:10px; background:red; top:0px; }
</style>
</head>
<body>
<div id="Outer">
<input type="text"/>
<div id="In">^</div>
</div>
</body>
</html>
The following code serves your purpose, I think.
<head>
<style>
#Outer{
float:left;
width:200px;
height:20px;
border:1px solid #336633;
}
#In{
float:left;
height:100%;
width:10px;
background:red;
}
</style>
</head>
<body>
<div id="Outer">
<div style="float:left"><input type="text"/></div>
<div id="In">^</div>
</div>
</body>
In the above code, I have added a div for your input element and add float style in both Outer and Inner div. Another thing, your width should be more than 155px, i use it as 200px.
Please let me know whether it works or do you want anything else.