How to make sure two divs have the same height? - html

Let's say I have 2 divs within a wrapper side by side.
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div>
#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}
How can I make sure div secondary always has the same height as div primary

try using javascript taking the value of the primary div an assignment at the second div.
The other way is trying the use pixel px or em, this way you ensure always has the same height both

There's a pretty cool trick on how to do this.
jsFiddle Demo
First, you apply padding-bottom: 100%; to each side-by-side div.
Next, you apply margin-bottom: -100%; to each side-by-side div. Note the -
Finally, you add overflow:hidden; to the div they are inside.
Presto! True happiness is yours.
HTML:
<div id="wrapper">
<div id="primary">Lorem ipsum dolor set amet. </div>
<div id="secondary">En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. </div>
</div>
CSS:
#wrapper {overflow:hidden;}
#primary {width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}
#secondary{width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}
References:
http://www.ejeliot.com/blog/61

If you specify the height value for their container let say #wrapper {height:300px;}, you can just set the the #primary and the #secondary height value to 100%. But if you don't want to specify any height value then you can use display:table option like in the example here http://jsfiddle.net/qiqiabaziz/LFEF5/

Your CSS
.table{display:table;width:99.98%;margin:0 auto;padding:0 0.01% 0 0.01%;border-collapse:separate;border-spacing:5px;}
.row{display:table-row;}
.cell{display:table-cell;text-align:center;width:50%;}
Your HTML
<body>
<div class="table">
<div class="row">
<div class="cell">content for this div
</div>
<div class="cell">content for this div
</div>
</div>
</div>
</body>

Unfortunately there is no perfect method to do this without using Javascript as realistically the two divs know nothing about one another.
What your options are depends on what exactly you were looking to achieve visually.
A quick google search brought this up which looks quite promising: http://www.vanseodesign.com/css/equal-height-columns/
If you can focus on more modern browsers you may be able to get away with using flexbox. See this post for examples etc: http://css-tricks.com/fluid-width-equal-height-columns/

Make the two divs of equal height (either by declaring their heights in px, em or %) and declare their overflow : auto, so if content in any or both divs increases, scroll is provided automatically and their heights do not get disturbed.

just make sure the parent div (div wrapper) has a width in pixel
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div>
#wrapper {
width:300px;
}
#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}
this will work, unless div primary has margin and/or padding

Related

How to keep divs from breaking while keeping them centered

I've got a red box and a green one, side-by-side, and centered. When the browser width is smaller than the width of the squares, they break into separate lines. How do I keep them together?
(I tried using a container div with their combined widths, which does the job in keeping them together, but they no longer are centered.)
Any suggestions?
The code:
<body>
<div style='text-align:center;font-size:0'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
</body>
You can run it here: https://plnkr.co/edit/2De21ziNmaeleFmkPuPF?p=preview
This can be done in many ways, here is 3:
Use min-width
<div style='text-align:center;font-size:0; min-width: 400px'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use white-space: nowrap
<div style='text-align:center;font-size:0; white-space: nowrap'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use display: flex;
<div style='text-align:center;font-size:0;display: flex;justify-content: center'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Try using Flex-box
.parent{
display:flex;
border:1px solid green;
width:500px;
}
.parent div{
background:green;
width:100px;
height:100px;
margin:20px;
}
<div class="parent">
<div>cell1</div>
<div>cell2</div>
</div>
Hope this helps
If you give them a fixed width (ex 200+200px), when that div width is passed (ex mobile width of 375px < 400px of divs sum), the last element slide on the next row.
With width of 35% for each other, will look exactly as you want it for that 200px.
<body>
<div style='text-align:center;font-size:0; width: 100%;'>
<div style='display:inline-block;background-color:red; width:35%;height:50px'></div>
<div style='display:inline-block;background-color:green; width:35%;height:50px'></div>
</div>
</body>
Here is the link to your code
EDIT:
Here is a usefull link for understanding better the width options depends of the width of device, and I encourage you to take a deeply look inside of w3schools, or other platforms where you can learn better how to manipulate elements of html, with css and js.
screen-width
Try using width: 50% on the boxes instead of width: 200px.

CSS: Align N divs horizontally in a wrapper

How can I achieved aligning of N contiguous divs horizontally with a wrapper whose width is 'auto'?
like:
.boxes{ width:200px;height:200px;float:left; }
<div id="wrapper" style="width:auto;">
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
. . .
</div>
I tried applying display:inline; and display:inline-block; on wrapper but boxes goes into new y after it reaches the browsers/display width?
But setting document's width into fixed will solve the issue but its not what I want.
Also I can easily achieved this using tables but I don't want to do it because my code will look messy and will be hard for me to maintain.
Add
#wrapper
{
white-space: nowrap;
}
and on your boxes class: change float:left to display:inline-block;
FIDDLE
This will keep your boxes from wrapping.

How to create a div grid with equal spacing in a flexible layout?

I am trying to creat a layout like this:
My question is specifically centered around the five boxes. I struggle with the CSS to get it to work. Have you guys got a simple setup for such a layout?
I see that you have fixed width, so here is an example. Widths are not exact for your width, but you can esily set values you need. Main thing here is float:left in small_bottom class which makes div to be shown in one row. overflow:hidden in bottom class makes that div wrap around floating divs (without that it will be shown like there is nothing inside). If you want this depend on browser window width - try using percents in width for small_bottom.
HTML:
<div class="main">
<div class="top"></div>
<div class="bottom">
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
</div>
</div>​
CSS:
div{border:solid 1px;}
.main{width:350px; border:solid 1px;}
.top{ height:40px;margin:5px;}
.small_bottom{
float:left;
height:50px;
width:50px;
margin:5px;
}
.bottom{margin:5px; overflow:hidden;}
​
Here is an example how it looks

How can I make two vertical DIVs be the same length?

I have the following HTML:
<div id="body">
<div id="left">xx</div>
<div id="right">yy
aa
<br>
<br>
<br>
aa
</div>
</div>
and the following CSS:
#body { background-color: yellow; }
#left, #right { float: left; }
#left { background-color: blue; }
#right { background-color: red; }
What I need is for the DIV on the left to grow to be the same length as the one on the right? Is this possible? I tried a few things but it doesn't work.
fiddle
There are numerous way to try it. You didn't assign either of them a height so they won't be doing much at the moment. If you add equal heights, they can be the same. You can try style="height:100%;" for both of them
Or add that to those IDs in your CSS, or make a class with it and assign that to your divs.
something like this $("#right").css("height", $("#left").css("height"));
Here's a way about it, using display: table-cell
Won't work in older browsers.
http://jsfiddle.net/ZrGBB/
You could having the right inside the left as so
<div class="left">
aa
<div class="right">
bb
<br/>
<br/>
bb
</div>
<div style="clear:both"></div>
</div>
and floating the right div right and stoppnig the left colapsing using the clear:both
There's no real simple one line of code way to do this but there are many solutions out on the web like Faux Columns or Equal Height Columns.
Give it a Google and find a solution that works best for you.

Simple CSS MasterPage layout

I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):