I want to add two extra bottom borders in a div so that it looks as attached image:
Do I need to add two additional empty div's for that? I have very basic markup:
<div class="box">
main div
</div>
Here's the basic demo:
http://jsfiddle.net/3TWtF/
Yes, you'll need to add two <div/>s like so: http://jsfiddle.net/UUDd3/ This will provide the most compatible solution.
Add the following HTML:
<div class="box2">
</div>
<div class="box3">
</div>
And the following CSS:
.box2{
border-left: 1px solid brown;
border-bottom: 1px solid brown;
border-right: 1px solid brown;
width: 480px;
height: 10px;
margin:0 10px;
}
.box3{
border-left: 1px solid brown;
border-bottom: 1px solid brown;
border-right: 1px solid brown;
width: 460px;
height: 10px;
margin:0 20px;
}
You can do it without two extra divs but it will require dropping support for IE7 as you will need to use pseudo-elements.
jsFiddle
.box{
border: 1px solid brown;
width: 500px;
height: 100px;
position:relative;
}
.box:after {
display:block;
content:"";
position:absolute;
border:1px solid brown;
width:400px;
left:50px;
top:100px;
height:15px;
}
.box:before {
display:block;
content:"";
position:absolute;
border:1px solid brown;
width:300px;
left:100px;
top:116px;
height:15px;
}
Related
I'm trying to center a div in the web browser when there is enough space. If not it should be collapsed between 2 divs.
This is the collapsed view
And this would be the expanded view
I've tried so many different things but nothing seems to work right. When I get something that looks right, the filterDiv ends up going over the top of titleDiv or buttonDiv or both.
Here's some code that I started with and should represent the collapsed view when the browser isn't very wide.
<style type="text/css">
.controlsDiv{
background-color:yellow;
border: 1px solid black;
}
.titleDiv{
background-color:Red;
width:25em;
height: 5em;
border: 1px solid black;
}
.filterDiv {
background-color: gainsboro;
width: 600px;
height: 10em;
border: 1px solid black;
}
.buttonDiv{
width:25em;
height:5em;
background-color:green;
border: 1px solid black;
}
</style>
<div class="controlsDiv" >
<div class="titleDiv">
<h2>titleDiv</h2>
</div>
<div class="filterDiv">
<h2>filterDiv</h2>
<h2>Centered in Browser Window</h2>
<h2>titleDiv and ButtonDiv Collapsed</h2>
</div>
<div style:clear:both></div>
<div class="buttonDiv">
<h2>buttonDiv</h2>
</div>
</div>
Thank you in advance!
You can always position absolute required div:
<style type="text/css">
.controlsDiv{
background-color:yellow;
border: 1px solid black;
}
.titleDiv{
background-color:Red;
width:25em;
height: 5em;
border: 1px solid black;
}
.filterDiv {
background-color: gainsboro;
width: 600px;
height: 10em;
border: 1px solid black;
}
#media(min-width: 900px) {
.filterDiv {
position: absolute;
left: calc(50% - 300px);
top: 0;
}
}
.buttonDiv{
width:25em;
height:5em;
background-color:green;
border: 1px solid black;
}
</style>
My HTML
<div id="wrapper">
<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>
</div>
My CSS
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:49%;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:49%;
height:160px;
border: 1px solid green;
}
A JSFiddle
So, when as you can see the width of each div is 49%, that's the only way I'm getting it to work. If you set the width of each to 50%, the divs aren't displayed next to each other anymore... Why is that?
Because of two things
Border size so you need to change box-sizing to border-box
White space on inline-block elements
* {
box-sizing: border-box;
}
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width: 50%;
height: 120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width: 50%;
height: 160px;
border: 1px solid green;
}
<div id="wrapper">
<div id="div1">The two divs are</div><div id="div2">next to each other.</div>
</div>
You need to remove the line break between the <div> tags and box-sizing:border-box;
The two divs arenext to each other.
Another approach would be to use float
#wrapper {
border: 1px solid blue;box-sizing:border-box;
}
#div1 {
float:left;
width:50%;
height:120px;
background:green;
box-sizing:border-box;
border:1px solid #909090;
}
#div2 {
float:left;
width:50%;
height:160px;
background:green;
box-sizing:border-box;
border:1px solid #909090;
}
The other option is to use Flex.
#wrapper {
border: 1px solid blue;
display: flex;
}
#div1 {
width:50%;
height:120px;
border: 1px solid red;
}
#div2 {
width:50%;
height:160px;
border: 1px solid green;
}
This is because you have added a border of 1px to wrapper. Your border with take 2px of total width of your page.
If you wanna keep the border and still keep the width of each div as 50%, you can refer to #NenadVracar 's answer
Another option is to use calc() and calculate the width to be 50% - 2px. I'm just listing that as an option #Nenad Vracar has the right answer
so i have a page that looks like this:
But i want the lines to be in the shape of a arrows like:
Is this posible???
My current css:
#show_length{
border-bottom: 2px solid black;
width: 99%;
}
#show_length2{
border-bottom: 2px solid black;
width: 20%;
}
And:
<div id="show_length">25m</div>
<div id="show_length2">2.5m</div>
You can do something almost like that using pseudo-elements
#show_length{
border-bottom: 2px solid black;
width: 300px;
}
#show_length:after{
content:">";
position:absolute;
font-weight:bold;
margin-left:265px;
margin-top:2px;
font-size:30px;
}
#show_length2{
border-bottom: 2px solid black;
width: 100px;
}
<div id="show_length">25m</div>
<div id="show_length2">2.5m</div>
I'm really sorry to post this. I've read dozens of posts on this same issue, but I just can't solve this. How do I place the blue and green boxes side-by-side? I've got plenty of space in my wrapping div, and I think that I am dealing with float correctly, but still incorrect results. What gives?
<div class="titleframe" >
<div class="image" >
<img id="thief" src="thief.png">
</div>
<div class="titletext">
<h1>My Title</h1>
<p>Line1<br>Line2<br>Line3</p>
</div>
</div>
.titleframe {
margin:0 auto;
width:750px;
clear:left;
height:300px;
border: 1px solid red;
}
.image {
width:100px;
height:250px;
border: 1px solid blue;
}
.titletext{
position:relative;
float:left;
padding-left:25px;
padding-top:0px;
height:150px;
width:250px;
border: 1px solid green;
}
Add float:left; to your .image class. Here is a fiddle: http://jsfiddle.net/36KP5/
.image {
width:100px;
height:250px;
border: 1px solid blue;
float:left;
}
Fiddle
You can either float the first one left, and add margin-left to the second one:
.titleframe {
margin:0 auto;
width:750px;
clear:left;
height:300px;
border: 1px solid red;
}
.image {
width:100px;
height:250px;
border: 1px solid blue;
float:left;
}
.titletext{
position:relative;
margin-left: 101px;
padding-left:25px;
padding-top:0px;
height:150px;
width:250px;
border: 1px solid green;
}
Or you can float them both left.
HTML
<div>
<div class="leftInRow5050 squareTopLeft">1</div>
<div class="rightInRow5050 squareTopRight">2</div>
<div style="clear: both;"></div>
</div>
<div>
<div class="leftInRow5050 squareBottomLeft">3</div>
<div class="rightInRow5050 squareBottomRight">4</div>
<div style="clear: both;"></div>
</div>
CSS
.rightInRow5050{
width:50%;
display: inline-block;
float:right;
}
.leftInRow5050{
width:50%;
display: inline-block;
float:left;
}
.leftInRow5050.squareTopLeft{
height: 35%;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.rightInRow5050.squareTopRight{
height: 35%;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.leftInRow5050.squareBottomLeft{
height: 35%;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}
.rightInRow5050.squareBottomRight{
height: 35%;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}
Why is the above code failing to create a 2X2 <div> matrix?
It is giving me the standard 1px problem, where the <div>'s fall under one another?
If the div's have a border and that's what's throwing it off, try this:
box-sizing:border-box;
You need to set a width and float for the right divs. See this Demo
.leftInRow5050 {
width:50%;
float:left;
}
.rightInRow5050 {
width:50%;
float:right; /* or left */
}
Edited to add: the code example changed while I was answering :p