I am attempting to make a second column in a DIV get taller when the column next to it gets taller.
In an attempt to 'sterilize' what I was trying to do, I created the following HTML with the styling in the DIV tags.
<body style = "width: 100%;">
<div style = "position: relative; display: inline-block; width: 100%;">
<div style = "display: inline-block; width: 700px;
background-color: #ff0000; float: left;">
line
<br/>
line
<br/>
line
<br/>
line
<br/>
line
</div>
<div style = "width: 300px; height: 100%;
background-color: #000; float: left; color: #fff;">
line
</div>
</div>
</body>
(There are a couple of closing tags I can't seem to get formatted correctly in this message.)
In my project, the red box can change height because the data inside will grow and shrink after the page has been loaded. So I have set it with display: inline-block.
When you display this, it will show one red area that fills the area from top to bottom. And there is a black side that only goes down one line.
How can I get the black side to go to the bottom AND shrink and grow with the red column?
I need the black box to extend to the same height as the red box.
You can use jQuery to find the largest div/element and set the others to be the same size, which is a dynamic solution just in case the first div gets larger, jQuery will always set them to be the same height.
var maxH = 0;
$('div.column').each(function() {
maxH = Math.max(maxmaxH, $(this).height());
}).height(maxH);
This could be helpful:
http://css-tricks.com/fluid-width-equal-height-columns/
Pure CSS solution for equal column height with stacked divs
Related
How can I place images like follow :
I would like the spaces between the images to be the same. Also while resizing the window, I would like the spaces to update so that each space always has the same size.
<div id="panel">
<img id="icon1" class="icon" src="...">
<img id="icon2" class="icon" src="...">
<img id="icon3" class="icon" src="...">
</div>
Here is what I have :
http://jsfiddle.net/eBLgP/2/
It looks a lot like this post : Fluid width with equally spaced DIVs
But it's not the same, I would like spaces also between the right and left side of the div. Also the example above seems quite complicate to me.
Updated fiddle:
http://jsfiddle.net/eBLgP/5/
final code, with responsive behavior:
#panel {
border: 2px solid blue;
overflow: auto;
}
.icon-container {
float: left;
width: 33.3%;
text-align: center;
}
when you make elements float you can sort them all in the same line and same orientation as long as they're floating in the same direction, however for the parent container (panel div in this case) to recognize the height of containing elements you need overflow property, so add
overflow: auto;
Now you can add a div to contain the images, because using a width directly on images would alter the image dimensions and that's not what is intended.
Once you got floating div elements, you can spread them with a percentage based with, granting all of them will have the same space inside your container, doesn't matter how big or small the screen becomes .
The only thing left is to center images inside their parent containers, since divs are block display by default, you can use text-align: center to grant all of the children elements of parent (the images in this case) will be centered
You can try by using text-align:justify and adding 1 line on bottom like this :
http://jsfiddle.net/26CLe/1/
#panel {
border: 2px solid blue;
text-align:justify ;
}
#panel:after {
content:'';
display:inline-block;
width:100%;
}
The only problem is that it add a little line on bottom, but justification is okay.
This solution came from here :
http://yidille.free.fr/plux/valign/?69-text-align-justify-sur-derniere-ligne-et-centrage-de-boites
I ran into a small problem with floats that i demonstrate in this fiddle.
I have a DIV which floats to the left, whose width is dynamic (unknown). I have another one that floats to the right in the same block, width dynamic as well.
The problem is that if the width of the first block extends so that it would collide with the right float, the right float will (correctly) drop downwards to make sure no collision is happening. However, i want it to stay on top (vertically, that is - not in terms of z-index).
Basically it seems that the text is prioritized as to "displace" the block on the right side. This should be the other way around, but with the text on the left using up the available space on the topmost line before it even starts to wrap.
I guess the solution is fairly simple. Its just that it doesn't come to my mind at all and any searches i did didn't find me what i was looking for.
You might want to try using css tables/ Just create both elements and make it a table, then make your right and left elements table-cells:
#wrapper {
display: table;
width: 100%;
}
#leftside, #rightside {
display: table-cell;
width: 50%; /* Both sides will be rendered on one line */
vertical-align: top;
}
/* Position elements within the cell */
#leftside { text-align: left; }
#rightside { text-align: right; }
#leftside > div, #rightside > div {
display: inline-block;
text-align: left; /* Reset text alignment */
}
Explanation: The table structure will keep the elements in one line with width 50%; The inner elements (divs in this case) will be inline-blocks so that they can be aligned left or right. Now when one of the inner divs exceeds the max width of 50% it will just make the other 'cell' side smaller
Float the label div inside the title div, that will wrap the title text around the label regardless of the width of either.
<div class="infoBox">
<div class="inner">
<div class="entry">
<div class="title">
<div class="type">
LABEL
</div>
If this text is longer, the LABEL will drop downwards.
I would like to have the LABEL float right (as it does here) but also be at the top of the block.
</div>
</div>
</div>
I have 2 divs side by side.
In the first div, I have 2 labels side by side, and one input text below them. One of the labels is an error information. Sometimes it will be displayed, sometimes not. When it's not display, I'd like the div to resize to be smaller, so the second div can be closer to it.
The second thing is the same thing, except it has one label div, therefore it doesn't requires a resize.
Is there a way to achieve what I want? There is an awesomely drawn example of what I want to acahieve below:
This is the code.
<div id="main-div">
<div id="address-number-div">
<label>Number</label>
<label class="error" id="number-error">Empty Field</label>
<input id="number-input" onfocus="onfocus('number-error')"/>
</div>
<div id="address-complement-div">
<label>Complement</label>
<input id="complement-input" />
</div>
and CSS:
div {border: 1px solid #000000; padding: 5px;}
.error{color:#FF0000; margin-left:5px;}
#main-div div {display:inline-block;}
#main-div input {display:block;}
#number-input {
width: 16%;
}
Have a look at this DEMO.
Floating your divs left should solve this problem.
Set them to display: inline-block; to let them shrink to fit the the content.
Don't give width <persentage> type value, give <length>:
#number-input { width: 24px; }
See it with your code on my fiddle.
Here is the smallest amount of code that clearly illustrates my problem:
<html>
<body>
<div style="float: left; width: 200px;">One</div>
<div style="float: left; width: 200px;">Two</div>
<div style="background-color: #f0f;">Three</div>
</body>
</html>
The first 2 divs are supposed to be 2 left columns. The 3rd should take up the rest of the page. Eventually, I'm going to add options to hide and show the 2 columns on the left.
But, why is the color purple extending all the way to the browser's left edge? I am trying to get it to start at the word "Three".
You need to 'float' the third column as well. Then add a clearing block after it.
See Block formatting contexts by W3C:
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
You can avoid that by forcing creation of new blocking formatting context:
<div style="background-color: #f0f; overflow: hidden">Three</div>
If overflow: hidden is not an option for you (popups etc.), here is another technique:
<div class="has-columns">
<div class="column first">...</div>
<div class="column second">...</div>
<div class="column third">...</div>
</div>
.has-columns {
padding-left: 400px; /* padding reserved for floats */
}
.column.first {
width: 180px;
margin-left: -400px;
float: left;
}
.column.second {
width: 180px;
margin-left: -200px;
float: left;
}
I have to admit, the behavior of floats can be confusing sometimes.
Depending what you want to have happen when columns one and two disappear, you have a few options:
1) If you want column 3 to expand and fill all the remaining space simply add overflow: hidden; to the styles of the third div. It will flow next to the two floated divs just as you expect.
2) If you want the third column to keep it's size and shape no matter what happens to columns 1 and 2, float it to the right, with a set width such as float: right; width: 200px; and it will no longer be effected by the other two, but stay 200px at the right edge of the container.
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)