I'm wondering how to make a div to grow bottom-up and not like it does normally.
I've here a example at jsFiddle. As u can see the right div will grow with more content but I want both div to stay fixed at the same level. (The left-div will never grow)
How can i make the right-div to grow bottom-up?
<div id="wrapper">
<div id="div_1">
læskdfsædlfksæ
</div>
<div id="div_2">
<tr>
<td>AUTHENTIQUE</td>
<td class="field_2">1.6 16V</td>
<td class="field_3">239 </td>
</tr>
<tr>
<td>AUTHENTIQUE</td>
<td class="field_2">1.6 16V</td>
<td class="field_3">239 </td>
</tr>
</div>
<div class="clearing"></div>
<div id="base"></div>
</div>
The css:
#wrapper{ overflow: hidden;}
#div_1{
border: 1px solid red;
width: 100px;
height: 50px;
float: left;
}
#div_2{
border: 1px solid black;
width: 200px;
float: left;
}
.clearing{ clear: both;}
#base{ border-top: 2px solid #666;}
No luck with float:left, because they are always aligned top. Change to display:inline-block;
http://jsfiddle.net/HerrSerker/ZEYvk/15/
Note: No whitespace between </div> and <div ...>
Changing float to inline is probably what you are after - but you could also absolutely position your div relative to another div it's inside and use bottom: 0 to keep the div stuck down.
This could be fixed by Javascript.. I used jQuery as shown in the example: jsfiddle
I just added the code:
$(document).ready(function (){
$("#div_1").height($("#wrapper").height());
});
Related
I'm unable to solve this problem:
I want to divide a known width space in two elements : textarea and a space for custom scrollbar. The textarea has a fix height (or dynamic if you use the vertical resizer) .
The table / table cell without width / table-cell width 1 px does the work, almost ....
The problem is that I'm unable to give the correct height & width and position for the right div.
If I use a wrapper to use the "absolute position" approach I have the correct height but wrong positioning (you can see using chrome or similar inspect tool that the div is outside...)
If I dont use the "absolute pos" approach I have the right width but no height... ( use the snippet, disable positioning for wrapper and inner div and see how there is a 20px space.)
I'm almost crazy with this problem...
I want to have and automatic width & height for the right div...
Any help w. be appreciated.
<div style="display: table;width: 320px; border: 1px solid red;"">
<div style="display: table-cell;">
<textarea style="width: 100%; height: 100px; max-height: 200px; resize: vertical;"></textarea> </div>
<div style="display: table-cell; width: 1px;height: 100%;position: relative;">
<div style="display: block; position: absolute; top: 0;bottom: 0;">
<div style="display:block; width: 20px;">
</div>
</div>
</div>
</div>
I think the problem is mainly caused by the browser default padding that applied to the <textarea>, you can simply set box-sizing: border-box; to it.
And remove that absolute positioned <div>, everything should work, updated demo below.
textarea {
box-sizing: border-box;
}
div, textarea {
vertical-align: top;
}
<div style="display: table; width: 320px; border: 1px solid red;">
<div style="display: table-cell;">
<textarea style="width: 100%; height: 100px; max-height: 200px; resize: vertical;"></textarea>
</div>
<div style="display: table-cell; width: 1px; height: 100%; border: 1px solid blue;">
placeholder
</div>
</div>
CSS question: I'm wanting a container with 3 inline images with a border around them (not each image). Under the image row and inside the container border I want a sentence or two of text. Without the text the container border is about the same width and height as the image row using display:inline-block, once I add the text the container width is 100%. I want the text to wrap under the image row and not expand beyond the left/right sides of the image row. I would like to know how this can be done and if it can be done using float:left and/or display:inline, display:inline-block. If it can be done both ways what are the pros and cons.
HTML:
<div class="container">
<img src="image1">
<img src="image2">
<img src="image3">
some text
</div>
CSS:
.container {
display: inline-block;
border: 1px solid black;
}
The following will create a div, with inner blocks for images and a block for text. They should both stay 500px. If the images are > 500px they will be clipped. The text won't cause it to overflow unless its a very long uninterrupted string.
If this doesn't help, use jsFiddle to put up an example.
CSS
.container {
width: 500px;
overflow: hidden;
background:red;
display: inline-block;
border: 1px solid black;
}
HTML
<div class="container">
<div class="images">
<img src="image1">
<img src="image2">
<img src="image3">
</div>
<div class="caption">
some text
</div>
</div>
This is a good example of what I'm wanting but with the text below the images. I would also like it to be HTML 5 compatible.
<div class="container">
<table>
<tr>
<td><img src="image1.jpg" height="200"></td>
<td><img src="image2.jpg" height=200"></td>
</tr>
<caption>a paragraph of text here...</caption>
</table>
</div>
.container {
display: inline-block;
border: 1px solid;
}
table {
margin: 0 auto;
}
How can i set the width of the first 2 divs to be dynamic (fit the contents width), while the 3rd div should use remaining horizontal space and be horizontally scrollable.
The result i need is that all 3 divs sit side by side and the 3rd div is hoziontally scrollable.
Script i have is as follows
HTML
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
CSS
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
width: 100%;
overflow-x: scroll;
}
The above script pushes div3 to the next line, which i dont want.
If you float #a and #b to the left, #c will fill the rest of the parent's width.
To get #c horizontally scrollable, you style its content container as:
#c .scroll-content {
/* You shouldn't do this on a table, but rather on a wrapping container. */
display: inline-block;
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
I made an example at JSFiddle.
You should set a parent div to hold them all together in the same row. Something like this instead should work.
<div id="parent">
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
</div>
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
}
#parent{
width: 100%;
overflow-x: scroll;
}
Also you might want to refactor your code. Since all of the divs are floating left, you might want to use just one class that floats to the left. I hope this helps.
The CSS...
#a {
float:left;
border:solid 1px #000;
width:33%;
}
#b {
float:left;
border:solid 1px #000;
width:33%;
}
#c {
float:left;
border:solid 1px #000;
width:33%;
}
.scroll{
float:left;
overflow:auto;
width:100%;
}
.content {
width:1000px;
overflow:auto;
}
And the HTML...
<div id="a">
This is text within my first content box
</div>
<div id="b">
This is text within my second content box
</div>
<div id="c">
<div class="scroll-content">
This is text within my third content box and this is horizontal and scrollable
</div>
</div>
UPDATED JSFIDDLE LINK BELOW AGAIN!!!
And a demo on jsfiddle - http://jsfiddle.net/GeLqV/1/
Mark, this will work for you now. I now see that you wanted all three divs on the same row, and the last one being able to horizontally scroll. Look at my jsfiddle demo. No matter what your screen size will be, all three div's are fluid in size and will stay together (for the most part).
I'm working on css layout where the first div should contain text, the div's width and height should be flexible according to content. On the right there should be 4 (in future maybe more) images with the same dimensions, at the best adaptable to the first div, but they have to be squares. For now I have just something like this. Any ideas? Thank you!
What about using floats? You would have two container divs one float right. The images could easily be held in a table since they are all the same size. If you know the width of the images ahead of time you could have the first div predefined to that width and height so that if the layout gets too small it won't break apart the images.
<div style="float:right;">
<table>
<tr>
<td><img src="" /></td>
<td><img src="" /></td>
</tr>
<tr>
<td><img src="" /></td>
<td><img src="" /></td>
</tr>
</table>
</div>
<div>
<p>some text here</p>
</div>
You can use the following HTML:
<div id="wrapper">
<div id="display">Some text</div>
<div id="rightBar">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
Along with the following CSS:
#wrapper {
overflow: auto;
background-color: yellow;
display: inline-block
}
#display {
width: 100px;
height: 100%;
float: left;
border: 1px solid black;
}
#rightBar {
width: 100px;
background-color:red;
float: left;
}
#rightBar div {
border: 1px solid black;
width: 40px;
height: 40px;
display: inline-block;
}
See a live example here
I know similar questions have been asked before but I haven't seen one where the parent div has an unknown width with a definitive answer.
So here's the situation.
<style>
.parent {
width: 100%;
}
.child {
width: 300px;
float: left;
}
</style>
<div class="parent>
<div class="child></div>
<div class="child></div>
<div class="child></div>
<div class="child></div>
<div class="child></div>
<div class="child></div>
...
<div class="child></div>
<div>
Basically, I want to fit as many child divs in the parent container as the user's screen resolution can support.
I don't want to use css3 media queries because I want to support IE7.
I tried using javascript to specify a width to the parent but it's not ideal as the content jumps to the center after it loads. Any ideas?
Just use display:inline-block; instead of float: left; and for .parent use text-align: center.
This is the nearest solution without the use of javascript.
It is display:inline-block; that makes divs side bar side and being in center at the same time. I've try turning .parent into display:table-cell; but didn't work. So need to use the actual <table> for the powerful centering behavior.
http://jsfiddle.net/Dgdhr/
Edited: http://jsfiddle.net/Dgdhr/1 (without table: thanks to MartinodF)
<table width="100%">
<tr>
<td align="center">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</td>
</tr>
</table>
.child {
width: 100px;
height:100px;
margin:10px;
display:inline-block;
background:#e0e0e0;
}
Using Roman answer I ended with this. All div inside my parent div will center, so you dont need to set child class.
.parent{
text-align: center;
}
.parent div{
display: inline-block;
}