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>
Related
I have a parent with children a elements. when user mouse over i am changing the child border color in to red. it works.
my problem is, the child length is not static. it is dynamic. I am adding the left-border radius both the first and last but how to add the right-radius to the second and last? ( since i don't know the count of the children)
.parent {
border:5px solid red;
display:inline-block;
position: relative;
border-radius:5px;
box-sizing:border-box;
margin-bottom:3em;
}
.parent a {
display:block;
padding:1em;
border-bottom:1px solid #ddd;
position: relative;
width:50%;
float:left;
box-sizing:border-box;
}
.parent a:nth-child(odd):hover{
border:5px solid #ddd;
margin: -5px;
}
.parent a:nth-child(even):hover{
border:5px solid #ddd;
margin: -5px;
left:10px;
}
.parent a:first-of-type{
border-top-left-radius:5px;
}
.parent a:last-of-type{
border-bottom-left-radius:5px;
}
<div class="parent">
12345
</div>
<div class="parent">
123
</div>
<div class="parent">
1
</div>
or what is the correct way to handle this?
You can use the following and all of your cases should be sorted:
.parent {
border:5px solid red;
display:inline-block;
position: relative;
border-radius:5px;
box-sizing:border-box;
margin-bottom:3em;
}
.parent a {
display:block;
padding:1em;
border-bottom:1px solid #ddd;
position: relative;
width:50%;
float:left;
box-sizing:border-box;
}
.parent a:nth-child(odd):hover{
border:5px solid #ddd;
margin: -5px;
}
.parent a:nth-child(even):hover{
border:5px solid #ddd;
margin: -5px;
left:10px;
}
.parent a:first-of-type{
border-top-left-radius:5px;
}
.parent a:nth-child(2) { /* second child */
border-top-right-radius:5px;
}
.parent a:last-of-type:nth-child(even){
border-bottom-right-radius:5px;
}
.parent a:last-of-type:nth-child(odd){
border-bottom-left-radius:5px;
}
.parent a:nth-last-child(2):nth-child(odd) {
border-bottom-left-radius: 5px;
}
Here is a jsfiddle:
https://jsfiddle.net/67hr0oax/4
Here is an update with some of the jerkiness removed:
https://jsfiddle.net/67hr0oax/7/
Please note: Browser support is for IE9 and above only.
As long as you keep the number of elements even by added <a> </a> this will work.
Though the outer border had some chinks in it to stop but they're there to stop the whole block jumping around when you mouse over.
.parent,
.parent a {
position: relative
}
.parent {
display: inline-block
}
.parent a {
display: block;
padding: 1em;
width: 50%;
float: left;
box-sizing: border-box;
border: 5px solid transparent;
background: #fff
}
.parent a:nth-child(1) {
border-top-left-radius: 5px;
border-top: solid red 5px
}
.parent a:nth-child(2) {
border-top-right-radius: 5px;
border-top: solid red 5px
}
.parent a:nth-child(even) {
border-right: solid red 5px
}
.parent a:nth-child(odd) {
border-left: solid red 5px
}
.parent a:last-child {
border-bottom-right-radius: 5px;
border-bottom: solid red 5px
}
.parent a:nth-last-child(2) {
border-bottom-left-radius: 5px;
border-bottom: solid red 5px
}
.single a {
border-radius: 5px;
border: 5px solid red
}
.parent a:hover {
border-color: #00f
}
<div class="parent">
1
2
3
4
5
<a> </a>
</div>
<div class="parent">
1
2
3
<a> </a>
</div>
<div class="single parent">
1
</div>
When you say that the count of elements in your row is "dynamic" then I don't think that CSS is designed to handle this kind of complexity.
If you keep the number of elements static then maybe we could use a combination of :nth-last-child() , :nth-child() to apply the border radius.
So apparently your options seem to be limited to processing using javascript.
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
I'm stuck here with an easy css problem:
The problem is to align "World" text inside the div element at the bottom right.
Here is a fiddle:
http://fiddle.jshell.net/0p6w3x14/2/
<div id="container">
<div id="tableElement">
<table> <!-- this table needs to be here, it's containing more info -->
<tr>
<td>
Hello
</td>
</tr>
</table>
</div>
<div id="element">
World
</div>
</div>
#container
{
width: 200px;
border: 1px solid black;
}
#tableElement
{
border: 1px solid black;
display: inline-block;
}
table
{
border: 1px solid red;
height: 100px;
}
#element
{
display: inline-block;
float: right;
border: 1px solid green;
}
Update your css like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // add this line
}
#element
{
display: inline-block;
position:absolute; //add this line
bottom:0; //add this line
right:0; //add this line
border: 1px solid green;
}
and remove float:right
Working fiddle here
Check this Fiddle.
I didn't use
float: right
and
display: inline-block
But instead I set a defined width, set its Left property to 100% and then use margin to adapt it to the container
#element{
width: 45px;
top:100%;
left: 100%;
margin-left: -45px;
}
This could be simply done by giving #element the styles position:absolute;, bottom:0; and right:0. And then giving #container the style position:relative; like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // Parent needs relative positioning if child will have absolute positioning
}
#element
{
border: 1px solid green;
position:absolute;
bottom:0;
right:0;
}
JSFiddle Demo
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