Im currently trying to make a square with 4 small squares inside, and I have been having troubles with a way I was trying to do.
So this is the code:
#grandbox {
position: absolute;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
I wanted to make the css style of the borders:
border: 2px solid black
But if I do that the boxes just break out of the bigger box and are display vertically.
I'm pretty newbie with this, as I currently started my carreer, but I cannot understand why doesn't it work.
PS: Sorry if bad english, not my first language.
Normally, border widths are added to the given width. With the box-sizing: border-box; rule, you can include the border into the width, so that you have no break anymore. See this snippet:
#grandbox {
position: absolute;
width: 200px;
height: 200px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
box-sizing: border-box;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
See https://developer.mozilla.org/de/docs/Web/CSS/box-sizing for more information about box-sizing.
EDIT: My answer is more of a hack solution. The accepted answer above that incorporates the box-sizing automatically including borders into the width is a better answer.
In your original calculation of height and width (204) I don't think you were accounting for both sides of each square being an additional 4 pixels larger.
Adjusting the width and height to 208px should solve your problem.
#grandbox
{
position: absolute;
width:208px;
height:208px;
border: 2px solid black;
left:40%;
top: 8%;
}
div.smallbox
{
border: 2px solid black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
<body>
<div id="grandbox">
<div class="smallbox">
</div>
<div class="smallbox">
</div>
<div class="smallbox">
</div>
<div class="smallbox">
</div>
</div>
</body>
The outer box should be positioned relative and the four inside boxes absolute. Then you just need to position them using left right top bottom properties.
#grandbox {
position: relative;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
position: absolute;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
div.sb1 {
top: 0;
left: 0;
}
div.sb2 {
top: 0;
right: 0;
}
div.sb3 {
left: 0;
bottom: 0;
}
div.sb4 {
right: 0;
bottom: 0;
}
<div id="grandbox">
<div class="smallbox sb1">
</div>
<div class="smallbox sb2">
</div>
<div class="smallbox sb3">
</div>
<div class="smallbox sb4">
</div>
</div>
Here's a jsbin version.
Related
Using css,
I want the the div(.scroll-indicator) to always cover parent div(.scroll-container), but when you scroll you see that it scrolls along with its content.
https://jsfiddle.net/vish6263/srnjyvtm/16/
Basically position: sticky is a hybrid of relative and fixed
Is there a solution for a hybrid of absolute and fixed?
Update: I already have it working by wrapping it without another container but since this is a re-usable component I am developing I didn want to add another layer inbetween, so was wondering if there is a solution using CSS only?
.scroll-container {
position: relative;
width: 200px;
height: 200px;
overflow: auto;
border: 1px solid blue;
}
.scroll-item {
height: 50px;
}
.scroll-indicator {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px solid red;
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
If you know the height you can try the following:
.scroll-container {
--h: 200px; /* the height */
position: relative;
width: 200px;
height: var(--h);
overflow: auto;
border: 1px solid blue;
}
.scroll-item {
height: 50px;
}
.scroll-indicator {
position: sticky;
top: 0;
height: inherit;
margin-bottom: calc(-1*var(--h));
border: 1px solid red;
box-sizing: border-box;
pointer-events: none
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
Wrap the items in another div;
.scroll-container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
display: flex;
}
.scroll-item {
height: 50px;
font-size: 20px;
}
.scroll-indicator {
position: absolute;
width: 100px;
height: calc(100% - 20px);
top: 0;
left: 0;
border: 1px solid red;
pointer-events: none;
}
.scroll-items {
overflow-y: auto;
display: flex;
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class="scroll-items">
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
</div>
Edit: fixed issue because I forgot to update it from my JsFiddle
How to position divs above the intersection of 2 other divs ?
I did try with relative and absolute positioning. But wasn't able to achieve a good result.
I have tried with relative and absolute positions in div1, div3 and I kept div3 inside div1 and increased its height. But after I placed the contents in div2 and tried to do a similar structure, the alinment got completly distorted.
Can anyone please help me with some better approach? Can it be acheived by css grids ?
Use this code.. it will help you....
.div1 {
background-color: yellow;
height: 100px;
border: 1px solid #000;
position: relative;
}
.div-2-half {
background-color: #fff;
height: 100px;
border: 1px solid #000;
width: 49%;
float: left;
}
.div2 {
width: 80%;
margin: 0 auto;
position: absolute;
background: transparent;
left: 0;
right: 0;
bottom: 41px;
}
.div3 {
background-color: #fff;
height: 100px;
border: 1px solid #000;
}
.div4 {
width: 100px;
border: 1px solid #000;
position: absolute;
left: 23px;
}
.div-container {
position: relative;
}
<div class="div1">
<p>div 1</p>
</div>
<div class="div-container">
<div class="div2">
<div class="div-2-half">
<p>div 2</p>
<div class="div4">div4</div>
</div>
<div class="div-2-half"><p>div 2</p></div>
</div>
<div class="div3"><p style="text-align:center; padding-top: 50px;">div 3</p></div>
</div>
I really need your help,
I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?
Here is the CSS markup:
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
display: none;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#text {
height: 100%;
border: 1px solid red;
}
HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
</div>
Here is a snapshot of the problem:
The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.
To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments
Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.
I also noticed the layout can be done simpler as follows.
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-bottom: -50px; /*half height*/
margin-right: -250px; /*half width*/
position: absolute;
/* display: none; */
}
#container {
background: #FFF;
border: 2px solid rgb(100, 139, 170);
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100, 139, 170);
padding: 4px;
font-weight: bold;
}
#text {
border: 1px solid red;
}
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div>
<div class="topbar" style="text-align: right;">Close</div>
<div id="text">
<p>test</p>
</div>
</div>
</div>
You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.
Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.
CodePen Sample
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
#wrapper{
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-right: -250px;
position: absolute;
border: 1px solid yellow;
}
#container {
background: #FFF;
left: 0%;
padding-bottom: 30px;
top: 0%;
margin: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
border: 1px solid green;
}
#text {
height: 100%;
border: 1px solid red;
}
I also fixed positioning for you.
Please see JSfiddle:
http://jsfiddle.net/76yKL/
Is there a way to align "ruler-mark-short" and "ruler-mark-high" divs to the bottom and center of their parents("ruler-mark-container") ?
Since width of "ruler-mark-short" and "ruler-mark-high" can be changed dynamically by JavaScript, I can't use 'margin' or 'left' in pixels.
So, I have to use something like "margin: 0 auto" or "text-align: center", but non of this works.
I'm struggling with aligning ruler-marks to both bottom and center without using additional wrapper container.
Any help is appreciated, thanks.
Code From JSfiddle above:
HTML:
<div class="container">
<div class="ruler">
<div class="ruler-mark-container">
<div class="ruler-mark-high"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-high"></div>
</div>
</div>
</div>
CSS:
.container {
border: 1px solid grey;
position: absolute;
width: 700px;
height: 200px;
}
.ruler {
border: 1px solid orange;
position: absolute;
width: 100%;
height: 100px;
bottom: 0px;
}
.ruler-mark-container {
border: 1px solid blue;
position: relative;
width: 30px;
height: 100%;
/*display: inline-block;*/
float: left;
bottom: 0px;
}
.ruler-mark-high {
position: absolute;
border: 1px solid black;
background-color: grey;
bottom: 0px;
width: 3px;
height: 50px;
}
.ruler-mark-short {
position: absolute;
border: 1px solid black;
background-color: grey;
bottom: 0px;
width: 3px;
height: 25px;
}
text-align:center does not work with absolutely positioned elements. So remove absolute position, and format them using display:inline-block.
Without absolute positioning, they won’t be at the bottom any more of course. To fix that, stop floating the container elements, and display them as table-cell instead, and add vertical-align:bottom to both containers and markers.
http://jsfiddle.net/76yKL/7/
You just need to add the following css:
.ruler-mark-short, .ruler-mark-high{
left: 50%;
margin-left: -1.5px;
}
Working Fiddle
UPDATED: (IE9+)
.ruler-mark-short, .ruler-mark-high{
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
/* Add other vendor prefixes here */
}
Working Fiddle
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}