I want all three boxes to be at the same level, you'll see how box 2 is below box 1 and 2 because it has less content in it than the other boxes, but there has to be some style I am missing to be make each div display at the same level (visually speaking) regardless of the content in it.
http://jsfiddle.net/bkmorse/519xzvou/
css
.container {
width: 470px;
border:1px solid purple;
height: 210px;
}
.box {
width: 150px;
height: 200px;
border:1px solid red;
display:inline-block;
}
html
<div class="container">
<div class="box">
<h1>Box 1</h1>
<p>Content</p>
<p>Content</p>
</div>
<div class="box">
<h1>Box 2</h1>
</div>
<div class="box">
<h1>Box 3</h1>
<p>Content</p>
<p>Content</p>
</div>
</div>
apply the style vertical-align:top to .box in your stylesheet
Making them display like table-cell also fit their heights and placement automatically:
http://jsfiddle.net/519xzvou/2/
.box {
width: 150px;
height: 200px;
border:1px solid red;
display:table-cell;
}
You can Use CSS 3 property in parent class
display:-webkit-box;
-webkit-box-orient: horizontal;
[jsfiddle][1]
[1]: http://jsfiddle.net/519xzvou/4/
Related
I'm making a website that has a series of offset cards, one with image and one with text and I want to alternate the offset for each line. The only issue is I can't quite figure out how to (while keeping both in the wrapper) make the image smaller than the wrapper in height so that the text card can be at the top and overlap the top and side, like this:
Sorry for the image layout, it was supposed to be landscape. Anyway, the way I have it now, the parent and child are both at the top of the wrapper. I want it so that the text (child) is at the top and the image is slightly shorter so that I get the overlap/overlay effect from the text box on the top as well as the right. I also need to make sure, for responsiveness, that they stay inside the wraper. How should I fix that?
#wrapper{
background-color:green;
}
#parent{
width: 500px;
height:400px;
border: 4px solid blue;
background-size:cover;
}
#child{
width:300px;
height:200px;
border: 3px solid red;
position:relative;
top:0%;
left:80%;
}
<div id="container">
<div id="wrapper">
<div id="parent">
<div id="child">
This is my overlapping Text
</div>
</div>
</div>
</div>
I'm not sure this is exactly what you're going for, but if you add padding to the top of the wrapper, you can offset the child element.
#wrapper {
background-color: green;
padding-top: 50px;
}
#parent {
width: 500px;
height: 400px;
border: 4px solid blue;
background-size: cover;
}
#child {
width: 300px;
height: 200px;
border: 3px solid red;
position: relative;
top: -50px;
left: 80%;
}
<div id="container">
<div id="wrapper">
<div id="parent">
<div id="child">
This is my overlapping Text
</div>
</div>
</div>
</div>
Here's the fiddle:
https://jsfiddle.net/16f8mj39/
I have added z-index to position the text-box in front of image box.Check my code.
#container{ width:100%;position:relative; }
#wrapper{ width:100%;border:1px solid black;position:relative;overflow:auto;height:400px; }
#text_box{ position:absolute;border:1px solid red;width:50%;height:250px;top:10px;right:10px;z-index:1;background-color:red; }
#image_box{ position:absolute;border:1px solid blue; width:70%;height:300px;bottom:10px;left:10px;z-index:0;background-color:blue; }
<div id="container">
<div id="wrapper">
<p>Wrapper</p>
<div id="text_box">
<p>Text Box</p>
</div>
<div id="image_box">
<p>Image Box</p>
</div>
</div>
</div>
My issue is that I wanted side-by-side elements with borders, but I noticed without doing some margin-hack it was difficult to use the border property and it still didn't look right. However when I use outline or box-shadow, I get this alignment issue at the end.
.inner {
outline: 1px solid black;
width: 50%;
height: 50px;
float: left;
margin: 0;
display: inline-block;
box-sizing: border-box;
position: relative;
background: #fff;
}
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
It looks alright when there's an even number of elements but when I have this last element it looks odd. Some might suggest I just make it fit to the end which would be okay but the size can be configurable sometimes so this could be a common occurrence.
What is the proper way to achieve this where the last element lines up the border(or outline) correctly?
Because you're using outline to create your border, the outlines at the center are actually overlapping one another. When you get to the bottom where there is only one div the outline is not being overlapped and therefore looks misaligned. You could solve this issues by building it as a table:
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.column {
display: table-row;
}
.inner {
display: table-cell;
border: 1px solid black;
width: 50%;
height: 50px;
background: #fff;
}
<div class="table">
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
</div>
</div>
I have the following HTML:
<div style="width:300px;background:yellow;">
<div style="float:left;border:solid 2px red;"><!--Img Div-->
<img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
</div>
<div style="border:solid 2px lime;float:left;"><!--Text Div-->
Banana!
</div>
<div style="clear:both;"></div>
</div>
I need to set the width of the Text Div such that it occupies the remaining width. I know this can be done by using width style attribute as width:164px;. What I needed to know is: Can this be done without setting the width manually using other css properties?
1) Remove float:left from the text div
2) Set overflow:hidden (or auto) on the text div
Updated fiddle
This creates a new block formatting context which causes the text div to fill the remaining width
Try this
<div style="width:300px;background:yellow;">
<div style="float:left;border:solid 2px red;"><!--Img Div-->
<img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
</div>
<div style="border:solid 2px lime;display:block; text-align: center; overflow: hidden;"><!--Text Div-->
Banana!
</div>
<div style="clear:both;"></div>
</div>
I added display:block; text-align: center; overflow: hidden; and removed the float: left from the text div
use display:table for parent and display:table-cell for the one which you want the width to fill
Note : moved your styles outside
.top {
width: 300px;
background: yellow;
display: table;
}
.inside {
float: left;
border: solid 2px red;
}
.txt {
border: solid 2px lime;
display: table-cell;
width: 100%;
vertical-align: top;
}
.clear {
clear: both;
}
<div class="top">
<div class="inside">
<!--Img Div-->
<img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png" />
</div>
<div class="txt">
<!--Text Div-->Banana!</div>
<div class="clear"></div>
</div>
Why is it that my border does not go around my inner divs, and my inner div borders do not go to the bottom of the outer div, ( in FF but need this for all major browser).
Can someone please help
<div id="main">
<div class="insidediv">
<p>Article 1</p>
</div>
<div class="insidediv">
<p>Article 2</p>
</div>
<div class="insidediv">
<p>Article 3</p>
</div>
</div>
#main{
width: 800px;
height: 100%;
border: 20px solid black;
}
.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
Alter #main to float: left; or overflow:hidden. I recommend the float
Set overflow: hidden; on #main.
Edit: demo
Floating elements takes them out of the normal flow of the document, meaning their container no longer understands where they end for lack of a more technical explanation. To solve the issue you need to clear the float after the last inner div by adding an element with clear:both applied. http://jsfiddle.net/calder12/BcqnE/
<div id="main">
<div class="insidediv">
<p>Article 1</p>
</div>
<div class="insidediv">
<p>Article 2</p>
</div>
<div class="insidediv">
<p>Article 3</p>
</div><div class="clear"</div>
</div>
#main{
width: 800px;
height: 100%;
border: 20px solid black;
}
.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
.clear{clear:both;}
There is also the clearfix method which is similar to the above but the more standard approach these days. http://j.mp/bestclearfix
I have 2 divs beside each other. I would like to have both divs the same height. Possible?
Here is a JsBin as a starting point: http://jsbin.com/uhoqeb/edit#html,live
Thanks.
For this you can use display:table-cell property for this.
#leftSection, main-content{
display:table-cell;
}
Check this http://jsbin.com/uhoqeb/2/edit#html,live
But it's not work IE7 & below.
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
If you want a border round it then have a look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html
add a container div
#macroSection {
height: 250px;
border: 1px solid #AAA;
}
then add the property "height" to the other 2 divs:
#leftSection
{
background-color: #fff;
width:170px;
float:left;
height: 100%;
border: 1px solid #c7c7c7;
display:block;
}
#main-content
{
width:250px;
overflow:auto;
height: 100%;
border: 1px solid #c7c7c7;
display: block;
overflow: hidden;
}
then wrap them in your html like this:
<div id="macroSection">
<div id="leftSection">
This is my left section
</div>
<div id="main-content">
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
</div>
</div>
You can also achieve this with javascript:
<script type="text/javascript">
document.getElementById('leftSection').style.height = document.getElementById('main-content').clientHeight;
</script>