So I've tried multiple solutions, but none seem to be working for my layout. What I'm hoping to have is 2 columns, each with 2 divs occupying 100% of the parents width. The height of each div is variable based on content.
So the idea is, the 2 columns on the left will determine the height of both columns, and the last div (in the bottom right) will be scrollable and occupy the remaining space.
I have an example in jsfiddle here: http://jsfiddle.net/Split98/cndej/ but there are 2 problems with this:
a) It doesn't allow for div C to still be dynamic in height
b) I really don't want to use display:table-cell
Also, when I tried implementing this temporary solution to my site everything broke anyway. So instead of trying to fix something I don't really even consider a solution I'm tossing in the towel and asking for help.
Now I know there are TONS of questions about equal height, but I couldn't find a way to solve both my problems: have left and right divs the same height, and have all 4 divs occupy the space.
So at it's most basic form (and again, I'm hoping to accomplish this without table-cell if possible):
<div id="wrap">
<div class="left">
<div class="A">A</div>
<div class="B">B</div>
</div>
<div class="right">
<div class="C">C</div>
<div class="D">Need this to expand to fill</div>
</div>
</div>
.left {
width: 200px;
display: table-cell;
}
.right {
position: relative;
width: 200px;
display: table-cell;
background: yellow;
}
.A {
background: blue;
height: 100px;
}
.B {
background: pink;
height: 200px;
}
.C {
background: red;
height: 50px;
}
.D {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
top: 50px;
right: 0px;
background: green;
}
I'm also not opposed to using Javascript, but I'm not very strong at all with it. Preferably, if it's possible, I'd like to do this with CSS.
Thanks guys!
If choose JavaScript, you can use this solution with jQuery.
$(function(){
$('.D').height( $('.right').height() - $('.C').height() );
})
http://jsfiddle.net/cndej/3/
Related
I have a post grid layout that I'm trying to make responsive and am having some trouble figuring out the best approach for reorganising/reordering the content using CSS.
The original grid looks like this:
So an image on the left, that's the full height of the parent div (for which the recommendations are usually Flexbox or Absolute positioning), and then two rows in the second column for post content).
What I'm trying to figure out is the best way to code it so I can reorder the blocks to the layout below using CSS (i.e. keeping the HTML code/structure the same):
Essentially, I need to figure out the best way to move block 3 (the bottom "cell" in the second column) out of the second column and onto its own new row using CSS.
I've tried Flexbox, but can't make the structure work for both layouts. The first layout seems to require a nested column structure (the second column requiring its own div to dictate the flex-direction) and the second won't work if I have one (I can't "escape" the box 3 content from the column if it's hardcoded).
Same thing for a table layout, the HTML has to dictate what cell goes where/rows and columns.
The closest solution I have so far is three basic HTML divs, one on top of the other, and "absolute" positioning for box 1.
Basic HTML
<div class="container">
<div class="box-1">
<img=full-height-image>
</div>
<div class="box-2">
<post-title-and-meta>
</div>
<div class="box-3">
<post-excerpt-read-more>
</div>
</div>
Basic CSS (Desktop)
.container{
position: relative;
}
.box-1{
height: 100%;
position: absolute;
max-width: 33.333%;
}
.box-1 img{
height:100%;
object-fit:cover;
}
.box-2,
.box-3{
margin-left: 33.333%;
max-width: 66.666%;
}
Basic CSS (Responsive)
.container{
position: relative;
}
.box-1{
display: inline-block;
position: relative;
max-width: 33.333%;
}
.box-1 img{
height:100%;
object-fit:cover;
}
.box-2{
display: inline-block;
}
.box-3{
display:block;
margin-left:0;
max-width:100%;
}
But this doesn't seem like a particularly elegant/foolproof approach.
Based on what I need to do, and the "full height of parent div" image requirement, is there a better way to do this?
you can switch from a table display to a flex display (use mediaquerie to choose when to switch from a layout to another) .
absolute and object-fit can indeed be used for the image.
example of the idea :
div {
/* reset */
border: solid 1px;
box-sizing: border-box;
}
/* table-layout example , first box */
.container {
width: 80%;
margin: 0.25em auto;
display: table;
background: lightblue
}
.container .box-1 {
display: table-cell;/* no need to filter, once parent is flex, it doesn't matter*/
vertical-align: top;/* it won't disturb once a flex-child*/
width: 33%;
position: relative;
}
img {
position: absolute;
object-fit: cover;
height: 100%;
width: 100%;
}
div>div:last-child {
background: lightgreen
}
/* flex layout example, second box */
.bis {
display: flex;
flex-wrap: wrap;
}
.bis>div:nth-child(2) {
flex: 1;
background: tomato;
}
.bis>div:last-child {
min-width: 100%;
}
<div class="container">
<div class="box-1">
<img src=http://dummyimage.com/100>
</div>
<div class="box-2">
<h1>post-title-and-meta</h1>
</div>
<div class="box-3">
<p>post<br>excerpt</p>
<p>read-more</p>
</div>
</div>
<div class="container bis">
<div class="box-1">
<img src=http://dummyimage.com/100>
</div>
<div class="box-2">
<h1>post-title-and-meta</h1>
</div>
<div class="box-3">
<p>post<br>excerpt</p>
<p>read-more</p>
</div>
</div>
http://jsfiddle.net/y88mq/1/
I have a simple layout with three containers: one, two, three. I am trying to get three to align at the top with one. Right now one and two are floated left and three is floated right. I tried combinations of clearing but it didn't seem to work. I would like to get this to work with just CSS.
<div class="left">one</div>
<div class="left">two</div>
<div class="right">three</div>
.left {
background: red;
width: 66%;
height: 200px;
margin-bottom: 10px;
float: left;
}
.right {
background: green;
width: 33%;
float: right;
height: 200px;
}
EDIT: I would like to keep the source order the same
If you must keep the order of the HTML the same, then all i can think of is to use:
position: absolute;
I have made the changes to your Fiddle: http://jsfiddle.net/hRdEf/
Hope that helps.
Due to the nature of CSS and its evil floats, I suggest you rearrange the order of the boxes. This will work fine:
<div class="left">one</div>
<div class="right">three</div>
<div class="left">two</div>
See: http://jsfiddle.net/y88mq/2/
Just place the "right div" at the top of the listed divs.
<div class="right">three</div>
<div class="left">one</div>
<div class="left">two</div>
..//rest of code
http://jsfiddle.net/y88mq/7/
<div class="left">one</div>
<div class="left">two</div>
<div class="right">three</div>
.left {
background: red;
width: 32%;
height: 200px;
margin-right: 20px;
float: left;
}
.right {
background: green;
width: 33%;
float: right;
height: 200px;
}
If you wrap columns one and two in a div, you effectively float the wrapper div and column three side by side and aligned at the top. The wrapper div will hold columns one and two stacked.
Extra advantage of this approach is that you can choose the align columns one and two on one line if there is more space available.
Semantically, your columns would still be in the same order.
Yo. There's a tendency in placing divs to follow each other vertically, but what i'm trying to accomplish right now is to is basically to place a number of divs (two) inside a parent div like so:
<div id='parent'><div id='onediv'></div> <div id='anotherone'></div> </div>
And i'd like to place 'anotherone' just to the right of 'onediv'. Sadly, float:right is pretty much ruining the layout with the divs popping out of their parent divs and whatnot. Any suggestions are welcome.
Edit: It might be worth noting that the parent div and 'anotherone' has no height elements at all, with 'onediv' planned to be thought as the "height support" div, allowing the contents of 'anotherone' to make the parent div larger at will.
Edit again: Here's the CSS for the specified stuff:
.parent
{
width: 90%;
margin: 0 auto;
border:solid black 1px;
}
.firstchild
{
width: 20%;
margin: 5px;
border: solid black 1px;
height: 180px;
}
.secondchild
{
width: 60%;
border:solid black 1px;
margin: 5px;
}
You can float both inner divs and give the outer div an overflow so that it grows with the inner divs.
Example:
#parent {
overflow: hidden;
}
#parent div {
width: 50%;
float: left;
}
Try this:
<div id="parent">
<div id="onediv" style="float:left;"></div>
<div id="anotherone" style="float:left;"></div>
<div style="clear:both;"></div>
</div>
I think this is what you want (note the re-ordering of DOM elements):
<div id="parent">
<div id="anotherone"></div>
<div id="onediv"></div>
</div>
/*CSS*/
#anotherone{
float:right;
width:50%;
}
#onediv{
float:left;
width:50%;
}
Note, if this is what you want, IE6 will still mess it up. ;-)
You certainly need to specify a width as indicated in #Kevin's answer to get the layout you described, simply specifying float left/right will not have the desired effect. Try specifying the width in pixels rather than a percentage. Failing that or if that's not appropriate for you, I think you possibly need to specify the width of the outer div (through css if you like).
#onediv { float: left; width: 50%; } #anotherone { float: right; width: 50%; }
Just use the <span> tag. Its the equivalent of except it doesn't start a new row.
I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.
Thanks for any help!
This works good for me. I have divided the screen into two halfs: 20% and 80%:
<div style="width: 20%; float:left">
#left content in here
</div>
<div style="width: 80%; float:right">
#right content in there
</div>
When you float those two divs, the content div collapses to zero height. Just add
<br style="clear:both;"/>
after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.
Another way to do this is to add overflow:hidden; to the parent element of the floated elements.
overflow:hidden will make the element grow to fit in floated elements.
This way, it can all be done in css rather than adding another html element.
None of the answers given answer the original question.
The question is how to separate a div into 2 columns using css.
All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.
So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...
.two-column-div {
column-count: 2;
}
assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.
The most flexible way to do this:
#content::after {
display:block;
content:"";
clear:both;
}
This acts exactly the same as appending the element to #content:
<br style="clear:both;"/>
but without actually adding an element. ::after is called a pseudo element. The only reason this is better than adding overflow:hidden; to #content is that you can have absolute positioned child elements overflow and still be visible. Also it will allow box-shadow's to still be visible.
For whatever reason I've never liked the clearing approaches, I rely on floats and percentage widths for things like this.
Here's something that works in simple cases:
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
If you put some content in you'll see that it works:
<div id="content">
<div id="left">
<div id="object1">some stuff</div>
<div id="object2">some more stuff</div>
</div>
<div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti</div>
</div>
</div>
You can see it here: http://cssdesk.com/d64uy
Make children divs inline-block and they will position side by side:
#content {
width: 500px;
height: 500px;
}
#left, #right {
display: inline-block;
width: 45%;
height: 100%;
}
See Demo
You can use flexbox to control the layout of your div element:
* { box-sizing: border-box; }
#content {
background-color: rgba(210, 210, 210, 0.5);
border: 1px solid #000;
padding: 0.5rem;
display: flex;
}
#left,
#right {
background-color: rgba(10, 10, 10, 0.5);
border: 1px solid #fff;
padding: 0.5rem;
flex-grow: 1;
color: #fff;
}
<div id="content">
<div id="left">
<div id="object1">lorem ipsum</div>
<div id="object2">dolor site amet</div>
</div>
<div id="right">
<div id="object3">lorem ipsum</div>
<div id="object4">dolor site amet</div>
</div>
</div>
Best way to divide a div vertically --
#parent {
margin: 0;
width: 100%;
}
.left {
float: left;
width: 60%;
}
.right {
overflow: hidden;
width: 40%;
}
Pure old school CSS
I know this post is old, but if any of you still looking for a simpler solution.
#container .left,
#container .right {
display: inline-block;
}
#container .left {
width: 20%;
float: left;
}
#container .right {
width: 80%;
float: right;
}
If you don't care old browser and need a simple way.
#content {
display: flex;
}
#left,
#right {
flex: 50%;
}
Floats don't affect the flow. What I tend to do is add a
<p class="extro" style="clear: both">possibly some content</p>
at the end of the 'wrapping div' (in this case content). I can justify this on a semantic basis by saying that such a paragraph might be needed. Another approach is to use a clearfix CSS:
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content {
display: inline-block;
}
/* \*/
* html #content {
height: 1%;
}
#content {
display: block;
}
/* */
The trickery with the comments is for cross-browser compatibility.
This is best answered here Question 211383
These days, any self-respecting person should be using the stated "micro-clearfix" approach of clearing floats.
Make font size equal to zero in parent DIV.
Set width % for each of child DIVs.
#content {
font-size: 0;
}
#content > div {
font-size: 16px;
width: 50%;
}
*In Safari you may need to set 49% to make it works.
Divide a division in two columns is very easy, just specify the width of your column better if you put this (like width:50%) and set the float:left for left column and float:right for right column.
I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/
I put a red border around it to try to see where my #right is on my page. I have tried working with:
height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.
Any ideas how I can get my sidebar to extend with the background-color to fit the length?
You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/
You can achieve this with a faux sidebar:
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
With this css:
.sidebar_back {
top: 0;
left: 0;
bottom: 0;
z-index: -1;
width: 200px;
background: #444; // the color you want the sidebar to be
position: absolute;
}
.sidebar {
float: left;
width: 180px;
padding: 10px;
}
The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example:
http://codepen.io/poopsplat/full/jquBv
You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.
You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.
The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.
There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.
I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15%; /* this has to be fixed-size so you can account
for it in the next bit; but can still be kinda
fluid-ish... */
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 83%; /* 100 - (15% + 2% (for a gutter)) */
margin-left: 1%;
margin-right: 16%; /* less than 100 - 83, to allow for rounding of % or px */
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
...
<body>
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
</body>
It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)
Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.
(Okay, I lied: I clearly have tried it now...)
Here is the way I have found to solve this issue:
You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.
First, add and style the elements in your stylesheet:
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
Then, simply set up your web page like this:
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!
I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
$('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});
It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)