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
Related
I am facing some issue with display block which I have put here with simplification.
.parent
{
width:200px;
border: 1px solid black;
background-color: #cccccc;
}
.first
{
border: 1px solid black;
float: left;
width:30px;
}
.second
{
border: 1px solid black;
display: inline-block;
background-color:white;
}
<div class="parent">
<span class="first">first</span>
<span class="second">second</span>
</div>
Revamping the question and its was quite confusing earlier. In above code snippet, .second width is limited to its content. I want .second to extend to end of the parent container .parent . I have tried using display: block instead of inline-block for .second but its not working. Please suggest how to do it?
if I got your point you can use overflow:hidden and while you use a <span> you will need to add display:block . Additional No need for display:block if this is a div
.second
{
border: 1px solid black;
background-color:white;
overflow:hidden;
display : block;
}
Demo
.parent
{
width:200px;
border: 1px solid black;
background-color: #cccccc;
}
.first
{
border: 1px solid black;
float: left;
width:30px;
}
.second
{
border: 1px solid black;
background-color:white;
overflow:hidden;
display : block;
}
<div class="parent">
<span class="first">first</span>
<span class="second">second</span>
</div>
Is there a way to show full border class="line" to ignore/exclude the padding without modifying the html?
For example:
<div class="padding">
<section>
<p>text</p>
</section>
<div class="line"> </div>
<section>
<p>text</p>
</section>
</div>
CSS:
.padding {
padding: 20px;
border: 1px solid black;
}
.line {
border-top: 1px solid black;
}
Demo: https://jsfiddle.net/tzq3o6tx/
I want the <div class="line"> </div> border to overlap the padding.
Simply add a negative margin on .line like so:
.line {
border-top: 1px solid black;
margin:0 -20px;
}
https://jsfiddle.net/tzq3o6tx/3/
You just have to set the width to be more than the padding and then set a starting point that is before the padding.
https://jsfiddle.net/tzq3o6tx/1/
.padding {
padding: 20px;
border: 1px solid black;
width:200px;
}
.line {
border-top: 1px solid black;
width: 240px;
margin-left: -20px;
}
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>
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 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;
}