I have 2 divs side by side.
The left div has all different heights, how can I make the right div automatically resize to the size of left div? If the content of the right div is larger than the left div there should be a scroll bar added to it.
The HTML
<div class="wrapper">
<div class="left"><!-- PHP Generated Content --></div>
<div class="right"><!-- PHP Generated Content --></div>
</div>
The CSS
.left{
width: 70%;
float: left;
}
.right{
width: 29%;
float: right;
border: solid 1px #000000;
height: 100%;
min-height: 200px;
overflow: auto;
}
.wrapper{
height: auto;
float: left;
border: solid 1px red;
}
http://jsfiddle.net/userdude/MJrS9/
Easy equal height columns:
.left{
width: 70%;
display: table-cell;
}
.right{
width: 29%;
border: solid 1px #000000;
display: table-cell;
}
.wrapper{
display: table;
border: solid 1px red;
width: 100%;
}
http://jsfiddle.net/g5mvs/
Without giving a pre-defined height to the parent '.wrapper', there is no way (that I can see) of detecting the height set against '.left' and applying it to '.right'. Even setting the height of the right div to 'inherit' would only pick up the height which is adjusting dynamically anyway. Perhaps someone could suggest a solution using javascript.
Related
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
I've looked at several other posts on vertically aligning divs but the solutions I'm finding don't seem to be working for my use case. I'd like to vertically center the div with the class "I-want-to-center-this-while-ignoring-the-other-two-divs".
I have a very simple example on jsfiddle here.
Can anyone help me out with this?
Code:
HTML:
<div id="container">
<div class="I-want-to-ignore-this"></div>
<div class="I-want-to-ignore-this float-right"></div>
<div class="I-want-to-center-this-while-ignoring-the-other-two-divs"></div>
</div>
CSS:
#container {
height: 300px;
width: 100%;
border: 2px solid black;
}
.I-want-to-ignore-this{
float:left;
height: 75px;
width: 100px;
border: 2px solid grey;
}
.float-right {
float: right;
}
.I-want-to-center-this-while-ignoring-the-other-two-divs{
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
vertical-align: center;
}
In the comment section you specified that your container will be fixed height. The simplest solution is to just make the position of the center div relative and move it down toward the center of the box with the "top" CSS attribute.
.I-want-to-center-this-while-ignoring-the-other-two-divs{
border: 2px solid green;
height: 150px;
width: 150px;
position:relative;
top:70px;
margin: auto;
vertical-align: center;
}
Here is the updated JSFiddle.
(NOTE: If your container changes size you would need to update the variable; but being fixed this solution should work fine)
I would simply add a top margin to your center div:
.I-want-to-center-this-while-ignoring-the-other-two-divs {
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
margin-top: 73px;
}
Since you have a fixed height on your parent container and your div has known height, this is the simplest way of doing it.
The math is: ( parent-height - (child-height+top-border+bottom-border) ) / 2
http://jsfiddle.net/audetwebdesign/7SfKW/10/
Add this to center div css:
position:absolute;
top:50%;
right:50%;
margin-top:-75px;
margin-right:-75px;
Remove margin from there
Add this to container:
position:relative;
Edit: JSFiddle
.I-want-to-center-this-while-ignoring-the-other-two-divs{
position:relative;
top:25%;
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
}
check this: JSFIDDLE
Your container is 300px height and the div you want to center is 150px. By applying simple math to center the div you need pad 50px above and 50px below to center the div. so top:25% would do that.
Just add position and top property to your css as shown above
I can not get a div that is created dynamically based on their content is resized. The idea that having a principial div (# divPrincipal) having a fixed width. Within this div, among other things will be another div (# divCabecera) which is to be resized according to their content. Finally, inside # divCabecera they will be created any number of div with text (# divTexto).
here it is the basic css:
# divTexto{
border-right: 1px solid #cdcdcd;
height: 100%;
width: 33%;
float: left;
display: inline-block;
}
All I need is that they appear more blue div's, the red area grow to the black area. after that display a scroll
I hope you can help me
I think this is what you're going for. Not sure but this is what I got.
http://jsfiddle.net/gulfarazyasin/BQfN3/
div#container {
border: 1px solid black;
height: 250px;
width: 300px;
overflow: auto;
white-space: nowrap;
}
div#container div#divTexto {
border: 1px solid blue;
height: 200px;
display: inline-block;
margin: 0 20px;
}
div#red {
border: 1px solid red;
margin: 10px;
display: inline-block;
}
Add/Remove #divTexto to see the desired effect
Okay here is the problem, I have images of different sizes, but that doesn't really matter because their width is always greater then their height, and all images are resized to a 100px width (height still is different in each image)
I am trying to vertical align the images inside a div of 100px x 100px. I tried all kinds of things. line-height, margin's auto, table cell methods all don't work for me...
Here's the html:
<div class="kassabon_product_image">
<img src="product1.png" />
</div>
and here's the CSS
.kassabon_product_image{
float: left;
display:table-cell;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
vertical-align:middle;
}
.kassabon_product_image img{
width: 100px;
}
.kassabon_product_image{
display:table-cell;
vertical-align:middle;
}
Remove the vertical-align from the img and that should do the trick.
see comments
.kassabon_product_image{
float: left;
text-align: center; /*using text-align:center in the outer div will center all elements inside the div*/
display:inline-block;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
}
.kassabon_product_image img{
width: 100px;
/*vertical-align:middle;*/ /*this is the wrong place to align*/
}
I want to create a two column layout with the right floated column containing a div that becomes scrollable once its content overflows the browser window height.
This is the html code that I am working on:
<div class=container>
<div class=column_A>A</div>
<div class=column_B>B
<div class=content>C<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>C
</div>B
</div>
</div>
And this is the css code:
.column_A {
float: left;
border: black solid 2px;
height: 500px;
width: 65%;
background: red;
}
.column_B {
float: right;
border: black solid 2px;
width: 30%;
background: blue;
}
.content {
border: white solid 3px;
overflow: auto;
background: green;
}
The scroll is currently on the browser window, how do I transfer it to the content?
You use overflow: auto like this:
.column_B {
float: right;
border: black solid 2px;
width: 30%;
background: blue;
overflow: auto;
height: 600px; /* ? */
}
You need to specify the height for your right column, though.
EDIT: To answer your comment, the easy way to go about it is if you set your document body's height to 100%, like this:
body {
height: 100%;
}
Then use a custom percentage to set the column's height to your liking.
.column_B {
...
height: 99%; /* or whatever you need */
...
}