I'm trying to understand how to put two div's next to eachother inside a wrapper and have them both column div's to match heights at all times, even if one has more content than the other, all without applying a strict height to the column. I've tried using height:100% and doesn't seem to work, here is the code/fiddle to show what I mean. Does anyone know what I am talking about and how to get this working?
<div class="wrapper">
<div class="left"><img src="http://i.stack.imgur.com/Sv4BC.png"/></div>
<div class="right">
<div class="stretch">
stretch to height: 100%
</div>
</div>
<div class="fix"></div>
</div>
CSS:
.wrapper{background:#eee;padding:10px;}
.stretch{height:100%;}
.left,.right{float:left;padding:5px;background:#FFF;}
.fix{clear:both;}
.left img{width:200px;}
Fiddle: (The two columns should be identical)
https://jsfiddle.net/19zsdswt/1/
I think the problem is with trying to add a height: 100% to a div that is floated.
You could try using a table, table cell relationship, like this:
.wrapper{display: table; background:#eee;padding:10px;}
.stretch{height:100%;}
.left,.right{display: table-cell; padding:5px;background:#FFF;}
/* .fix{clear:both;} */
.left img{width:200px;}
I have updated your fiddle here - https://jsfiddle.net/sfyt9skx/
Related
I'd like to make my table go full width (prior to my table my content is restricted next to three blocks which I'm cool with).
The table appears after the words "A selection of awards won:"
You can see the page - here
Would this be possible with inline css?
Thanks,
Sam
The best solution is removing your table from the:
<div id="right">
And creating a new div bottom or something with 100% width under the div right/ div left.
<div id="bottom" style="width: 100%"><table>
This should fix your problem,
You can't go full width because your container .sub-content is not full width...
If you want to go full width you will have to put your table in another container that is at the same level as the .left and .right container but with full width.
Something like :
<div id="content-sub">
<div id="left">...</div>
<div id="right">...</div>
<div id="bottom">
<!-- Your table goes here -->
</div>
</div>
with :
#bottom{
display: block;
width:100%;
}
Simply copy your your table code out and place it just above this code
<br clear="all" />
<div id="footers">
I want to put the same div twice on the same row and cover all of its width and I need to put some space between them both.
The problem is when I use margin it will affect them both since they have same class so the second div will go below the other because the total width will become bigger than the container width.
I tried to use overflow:hidden or overflow-x:hidden with margin or change their size but nothing changed.(also I've tried to use borders with overflow hidden)
I am forced to use many div from the same class and I need them to cover all the width of the row.
Edit: the code is big so I will post a small example to explain my question
<div class="container">
<div class="block">content...</div>
<div class="block">content...</div>
</div>
<style>
.container{width:1000px; margin:0px auto;}
.block{width:480px;height:500px;float:left;}
</style>
I want to put first block + 40px space + second block
If you want the two .block divs on the same row what I would do is not do it in pixels but with %'s.
For example what I would do is this:
Give your div that you want on the right an id of right and the one that you want on the left an id of left:
<div class="container">
<div class="block" id="right">content...</div>
<div class="block" id="left">content...</div>
</div>
Then I would style it with
<style>
.container{width:1000px; margin:0px auto;}
.block{width:48%;height:500px;display:inline;}
#left{float:left;}
#right{float:right;}
</style>
You can play around with the exact width percent to get it to your standards.
You might want to make give them different class names or ids if you want to manipulate the two of them different.
<div class="container">
<div class="block1">content...</div>
<div class="block1">content...</div>
</div>
You can use inline display to make them appear in the same row.
.block1, block2 {
display: inline;
}
From there you can style them how you want by selecting either of those classes.
Could this be something like you're after?
http://jsfiddle.net/justin_thomas/9S46N/
The CSS:
.myRow {
width:48em;
}
.myclass {
padding: 1em;
margin-left:1em;
margin-right:1em;
float: left;
display:inline;
width: 20em;
}
The HTML:
<div class="myRow">
<div class="myClass">Blah... blah...</div>
<div class="myClass">Blah... blah...</div>
</div>
In there, i've used floats to get the desired effect. Unfortunately this means you have a hard time if you can't specify the actual width of the row's container in physical units (or one of its parents) and you also need to know whe number of columns there will be in this row to use as the width amount in the class with the divs.
I don't really like this as as solution as you need to make sure that the sum of each (div width + left-margin + right-margin) is never larger than the width of the row container.
Okay, so this is going to be hard to explain, so please ask questions if I am not clear
In my html page, I have a main "container" div that has multiple divs within it, but each of the divs inside the container are placed into one of two columns (so if there is a div in the container, it is either in the left column or the right column)
<div id="container">
<div id="column1">
<div id="item1-1"></div>
<div id="item1-2"></div>
<div id="item1-3"></div>
</div column1>
<div id="column2">
<div id="item2-1"></div>
<div id="item2-2"></div>
<div id="item2-3"></div>
</div column2>
</div container>
[NOTE: I know the syntax is incorrect, I am just making it easier to read]
So, in other words, I want two columns of divs that can vary in size (so the page size can vary), and so that item1-2 appears below item1-1, etc. The problem here is I want the divs in the container to appear inside of it, so I cannot use absolute or relative positioning. Something is telling me I should be using a table, but I am not sure how to go about doing this.
So, my question is: using only html and css, is there any to do exactly what is above?
First: make </div column1> and </div column2> just say </div>
Second: CSS:
#container {
width: 100%;
}
#column1, #column2 {
float: left;
width: 50%;
}
To achieve the look you want you should use CSS float property. However, to avoid problems with parent container not displaying correctly, consider following one of the two possible solutions:
Adding a div after floating elements with
clear: both
or applying code below to your parent div
overflow: hidden
I have two divs on a page with the same height position. I'm trying to make them expandable, allot like what goes on in the WordPress dashboard area:
Now i've got the left div to expand but only with the right div staying at the same width. I need both to expand on zooming in and out.
any ideas how this is done?
I've been looking it up for the past hour but i cant find anything.
A link to a tutorial would be cool (good luck finding one).
EDIT:
Here guys, i found something similar: http://jsfiddle.net/Khez/2zLPF/embedded/result/
do you see how the two divs side by side expand? the green and blue ones...
If you want your divs to dynamically change depending on the width of their container, set the widths using percentages:
HTML:
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
CSS:
.column {
float: left;
width: 50%; }
.column div { margin: 0 20px; /* Set the spacing between the cells */ }
Preview: http://jsfiddle.net/Wexcode/F7h2C/
NOTE: Because you are setting the combined widths of the columns to 100%, you cannot add padding to .column if you want them to be on the same line. The inner div wrapper will allow you to add spacing between your two columns. You should apply all background attributes to .wrapper.
I always seems to get this simple HTML stuff wrong. I am currently trying to add side by side divs in the middle of a page on this test page I made:
http://www.comehike.com/hiking_dev.php
The code I added was something like this:
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
I added <strong> tags so you can spot it on the page better.
But do you see there is text that appears there that reads like this "When considering the injury risk of any" - but that text is in the <p> tag below. Why is it appearing there?
Is it better practice to wrap my 2 divs that I am trying to align, within another div?
After your two floating divs, add another empty div...
<div style="clear:both;"></div>
This will cause the two floating divs to push all subsequent content below them. As you have it now, there is 200 pixels of empty space after the first div allowing the other content to simply wrap around it.
Increasing the width of the floating divs may not be desirable for your layout so clear:both; is most typical for this situation.
Surround those two divs in a parent div with overflow set to hidden.
<div style="overflow:hidden;">
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
</div>
An alternative (as others have pointed out) is to use a third element:
<div style="clear:both;"></div>
It's debatable as to which is better. Usually, either is just fine. Here's a post about the topic:
Floated Child Elements: overflow:hidden or clear:both?
You'll either need to add a div below your two divs with clear:both; as others have suggested, or you could add clear:both; to the following <p> element.
Because you have an entire page width of 960px. You're combined div widths are 760px (400+300). If you add 200px to the second div you should be fine.
Edit: Because of padding, you can increase either of the divs by 150px and be fine.