I would like to have a table of elements (pictures) arranged horizontally, and such that the elements partially overlap, in order to save some space.
I attempted to solve it through CSS. Here is my code,
<!DOCTYPE html>
<html>
<head>
<style>
div.tableel
{
height : 100px;
width : 100px;
display: table-cell;
position: relative;
}
div.tableel ~ div.tableel
{
left: -30px;
font-size: 24pt;
}
div.row
{
display: table-row;
}
div.table
{
display: table;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="tableel" style="background-color: red;">
reg
</div>
<div class="tableel" style="background-color: blue;">
ge
</div>
<div class="tableel" style="background-color: yellow;">
rg
</div>
</div>
</div>
</body>
</html>
What I do not understand is why the font is set correctly, but the third element is not shifted to the left, as I would expect to.
Thanks!
What I do not understand is why the font is set correctly, but the
third element is not shifted to the left
It is being shifted exactly as you intended it to.
The reason you are not able to see it is because when the second div shifts to left, it creates a gap between itself and the third, which is being filled up by the third.
This fiddle will help you see this: http://jsfiddle.net/abhitalks/byayxob0/
If you want to stick to doing it this way, then you will have to get the last div to move left by double the amount:
div.tableel:last-child { left: -60px !important; }
See here: http://jsfiddle.net/abhitalks/byayxob0/1/
But, this will be a problem for you if you have indeterminate number of divs. You will have to change the left property cumulatively, which CSS cannot do for you.
That said, a simpler way to do what you want, would be to just keep the divs inline and then use negative margins to control the overlap.
Demo Fiddle: http://jsfiddle.net/abhitalks/4gaotuwL/
Demo Snippet:
div.tableel {
height: 100px; width: 100px;
display: inline-block;
}
div.tableel:nth-child(1) { background-color: rgba(255,0,0,0.5); }
div.tableel:nth-child(2) { background-color: rgba(0,0,255,0.5); }
div.tableel:nth-child(3) { background-color: rgba(255,255,0,0.5); }
div.tableel:not(:first-child) {
margin-left: -10px;
}
<div class="table">
<div class="row">
<div class="tableel">reg</div>
<div class="tableel">ge</div>
<div class="tableel">rg</div>
</div>
</div>
It's because the second element is moved 30px to the left so that it would be 30px further away from the 3rd element, then when you shift the 3rd element 30px to the left it just closes the gap you made. If you want to move the 3rd element to overlap the second by 30px, you'd need to move it 60px to catch up to it and overlap it.
.table {
width: 300px;
table-layout: fixed;
display: table;
}
.tableel {
height: 100px;
width: 100px;
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
}
.row {
display: table-row;
}
.default .tableel ~ .tableel {
left: -30px;
}
/* I just moved the second block*/
.scene-1 .tableel:nth-child(2) {
left: -30px;
}
.scene-2 .tableel:nth-child(2) {
left: -30px;
}
/* I also moved the third block - but 60pixels. (as 30pixel will move it beside 2nd block*/
.scene-2 .tableel:nth-child(3) {
left: -60px;
}
<h2>Your code</h2>
<div class="table default">
<div class="row">
<div class="tableel" style="background-color: rgba(255,0,0,0.7);">
reg
</div>
<div class="tableel" style="background-color: rgba(0,255,0,0.7);">
ge
</div>
<div class="tableel" style="background-color: rgba(0,0,255,0.7);">
rg
</div>
</div>
</div>
<h2>Scene 1</h2>
<div class="table scene-1">
<div class="row">
<div class="tableel" style="background-color: rgba(255,0,0,0.7);">
reg
</div>
<div class="tableel" style="background-color: rgba(0,255,0,0.7);">
ge
</div>
<div class="tableel" style="background-color: rgba(0,0,255,0.7);">
rg
</div>
</div>
</div>
<h2>Scene 2</h2>
<div class="table scene-2">
<div class="row">
<div class="tableel" style="background-color: rgba(255,0,0,0.7);">
reg
</div>
<div class="tableel" style="background-color: rgba(0,255,0,0.7);">
ge
</div>
<div class="tableel" style="background-color: rgba(0,0,255,0.7);">
rg
</div>
</div>
</div>
You should do left: -60px; to the third element in order to go -30px left because the second element is -30px left.
UPDATE
If you are having an unknown number of divs and wanted to make this work regardless of how many divs you have without having to specify incrementing left values then I suggest using a negative margin.
Simply change this:
div.tableel {
height : 100px;
width : 100px;
display: table-cell;
position: relative;
}
To This:
div.tableel {
height : 100px;
width : 100px;
display: inline-block;
position: relative;
}
and then give the blocks a negative margin by replacing this:
div.tableel ~ div.tableel
{
left: -30px;
font-size: 24pt;
}
to this:
div.tableel {
font-size: 24pt;
opacity: 0.5;
margin-left: -30px;
}
So looking at the code and various answers; I think you're getting confused on the
div.tableel ~ div.tableel
{
position: relative;
left: -30px; /* <------------------This */
font-size: 24pt;
}
left: -30px portion.
Looking at your 3 boxes. You have Box number 1, 2 and 3. Based on your selector; You are moving box 2 to the left -30px and moving box number 3 to the left by -30px.
When you move the first box to the left by -30px; you are creating a gap between box 2 and box 3 of 30px:
This means that Box 3 needs -30px to close the gap. and an additional -30px to overlap so box 3 needs to be -60px for this to work:
-30px:
-60px:
So in short.. I would replace this portion of your code:
div.tableel ~ div.tableel
{
left: -30px;
font-size: 24pt;
}
with this simplified fix:
div.tableel{
font-size: 24pt;
}
div.tableel:nth-child(2){
left: -30px;
}
div.tableel:nth-child(3){
left: -60px;
}
Here is the Fiddle: https://jsfiddle.net/8uhnwhwt/
Related
There are two div tag. First one is display 20px from right side and another is displaying 103px from right and both are in the same row.
some times both were getting overridden because of the text inside the div tags. the text will vary based on some option. its dynamic. sometimes it wont get overridden because the text size is low.
i want the following scenarios to be done.
first div tag's right would be 20 px. second div tag right's needs to be starts from the left edge of the first div tag. is this possible? can anyone help me?
.second-button {
font-size: 14px;
color: #00aeef ;
position: absolute;
bottom: 22px;
right: 103px;
cursor: pointer;
}
.first-button {
position: absolute;
right: 20px;
bottom: 16px;
}
The above style i am currently following. Based on that can any one give the solution?
.main-div {
text-align: right;
}
.div1 {
display: inline-block;
background: #CCC;
}
.div1:last-child {
margin-left: 20px;
}
<div class="main-div">
<div class="div1">This is first div</div>
<div class="div1">This is second div</div>
</div>
to both of your div's add the word-wrap: break-word; css give them the desired width and you should be great
I made some code.. might be it will help you
<div class="abc">First Div</div>
<div class="abc">Second Div</div>
<style> .abc{float:right; margin-right:20px;}
</style>
try this
<style type="text/css">
#div1{
margin-left: 20px;
}
#div1, #div2{
display: inline-block;
}
</style>
<div id="div1">
</div>
<div id="div2">
</div>
I want four divs to appear on the same line. I can make three of them do it but the other won't unless I make the total width that the four divs take up less than 100%.
This shouldn't happen though, right? They should be able to, in total, take up 100% of the page width if there is nothing else 'in the way'? Below is a snippet with my code of what I mean.
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
font-size: 10px;
}
.wrapper {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0.5%;
margin-left: 0.5%;
margin-right: 0.5%;
}
.inner {
display: inline-block;
vertical-align: top;
width: 25%;
}
.half {
width: 12.5%;
}
<div class="wrapper">
<div class="inner" style="background-color: red;">Div 1</div>
<div class="inner" style="background-color: blue;">Div 2</div>
<div class="inner" style="background-color: green;">Div 3</div>
<div class="inner">
<div class="inner half" style="background-color: purple;">Div 4 - First Half</div>
<div class="inner half" style="background-color: Teal;">Div 4 - Second Half</div>
</div>
</div>
I haven't checked to see if aligning the divs on the same line using float: left will make a difference to the problem as I need to use display: inline-block for aligning other thighs in the divs in my actual code.
So does any one know how to get the last one to appear on the same line?
Because you need to add float: left; to inner to make it behave as expected.
Also Adam is right, 12.5% will be 12.5% of the already 25% width container. I've removed the inner class from the half divs and changed their width to 50%.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
overflow: hidden;
font-size: 10px;
}
.wrapper {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0.5%;
margin-left: 0.5%;
margin-right: 0.5%;
}
.inner {
display: inline-block;
vertical-align: top;
width: 25%;
float:left;
}
.half {
float:left;
width: 50%;
}
<div class="wrapper">
<div class="inner" style="background-color: red;">Div 1</div>
<div class="inner" style="background-color: blue;">Div 2</div>
<div class="inner" style="background-color: green;">Div 3</div>
<div class="inner">
<div class="half" style="background-color: purple;">Div 4 - First Half</div>
<div class="half" style="background-color: Teal;">Div 4 - Second Half</div>
<div style="clear:both;"></div>
</div>
</div>
Your CSS doenst contain a class thats called "inner half" so you are combining two. You have multiple width's. Your first calls is inner so it takes 25% + 12.55
Try clearfix. Just apply a class="clearfix" to the parent element. This is the easier and the more modern way around this, as compared to floats. The bigger advantage is that you can re-use it all over your HTML DOM much more easily than the approach you're taking.
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
I have three divs that I am trying to put on a single line. I want one to always snap left, and I want one to always snap right. The third one, which the display will be toggled using javascript, has to always be center. I've tried float. I've tried display:inline-block. Nothing works. Below is my code, any help would be greatly appreciated.
<div id="header" class="AppBackColor" style="color:#FFFFFF; padding:2px; width:100%; height:34px;">
<div style="height:100%;display:inline-block;float:left;">
<img src="Images/Logo/uss_logo_white.gif" height="30px" width="31px" alt="USS" />
<label>Change Control</label>
</div>
<div id="TimeoutWarning" style="height:100%; width:450px;display:inline-block;margin:0 auto;">Your session will expire in <label id="lblSessionCountDown">5:00</label>. Click <a style="color: Red;" href="#" onclick="ResetSession();void(0);">OK</a> to continue your session.</div>
<div style="height:100%;display:inline-block;float:right;">
<label>User:</label>
<asp:Label ID="lblUser" runat="server"></asp:Label>
<asp:ImageButton ID="btnLogout" runat="server" BorderStyle="None" ImageUrl="~/Images/Logout-icon.png" onclick="btnLogout_Click" Height="30px" Width="30px"/>
</div>
You can use absolute positioning like this:
.container {
position: relative;
width: 100%;
height: 50px;
}
.first {
width: 100px;
height: inherit;
position: absolute;
left: 0;
background-color: #FAA;
}
.second {
width: auto;
height: inherit;
position: absolute;
top: 0;
margin-left: 100px; // 1st div width
margin-right: 200px; // 3rd div width
background-color: #AFA;
}
.third {
width: 200px;
height: inherit;
position: absolute;
right: 0;
top: 0;
background-color: #AAF;
}
And then use a <div class="container"> which has inside the 3 divs with classes first, second and third.
If you set the margins of the second equals to the with of the first and third, like in the sample, it will fill up all the space.
You can look at it working in this fiddle: http://jsfiddle.net/jbustos/Bq2rw/
Here's an example of one way to do it. The order of the divs in the HTML being left, right, center is important, since otherwise the right will place itself below the left and center elements. See it live at jsfiddle (with JS to hide/show the center). Here's the HTML:
<div class="left">left text</div>
<div class="right">right</div>
<div class="center">center</div>
And CSS:
.left, .center, .right {
background-color: red;
width: 100px;
}
.left {
float: left;
}
.center {
margin: auto;
}
.right {
float: right;
}
I've split my page into two vertical divs, each containing a number of nested divs wrapped so that they resize preserving a set ratio. That works great - but for some reason the divs on the left end up shorter than the divs on the right! The CSS is consistant, but something's not...
You can see a gap appear at the foot of the left-hand column here:
http://jsfiddle.net/VsJLs/
Is it clear what's wrong? Thank you for looking!
<head>
<style type="text/css">
.break {
padding-top: 25px;
}
.leftcol {
width: 50%;
position: absolute;
top: 0px;
left: 25px;
}
.leftpad {
padding-right: 38px;
}
.rightcol {
width: 50%;
position: absolute;
top: 0px;
right: 25px;
}
.rightpad {
padding-left: 37px;
}
.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 161.3%;
display: block;
background-color: red;
content: '';
}
</style>
</head>
<body>
<div class="leftcol">
<div class="leftpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>
<div class="rightcol">
<div class="rightpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>
</body>
</html>
I've tried zeroing margins as suggested below but that doesn't improve things. It seems like the problem could lie with the padding-top: 161.3%; property. Changing % to px fixes that creeping misalignment - but I need to keep it as a percentage! Can anybody figure this out? Thanks for your time.
The problem is caused due to the margin border; set it to 0 or same on all sides:
MARGIN
{BORDER=0;
}
I figured it out - I mean: I know the problem but I'm still not sure why... The gutter I created was split unevenly:
.leftpad {
padding-right: 38px;
}
and
.rightpad {
padding-right: 37px;
}
If both those are equal (http://jsfiddle.net/VsJLs/1/) then there's no slip. Now I'm worried about creating columns this way - that's another question though...
I've searched the many similar questions like this, but none of the solutions are working. It should also be noted that I am using twitter bootstrap. I want a bunch of divs to span the entire length of the parent div at the bottom of it. I have tried putting them inside a div that text-align:center and then using float-left inside the gridPics class, and using display: inline-block, text-align :left and nothing seems to do it. The two in the example below are in the exact same spot, and I want them side by side. Here is what I have:
HTML:
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<!-- These are the divs to span across, when it works there would be more than two -->
<div class="gridPics"></div>
<div class="gridPics"></div>
<!-- They will also go over this image -->
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS:
.gridPics{
position: absolute;
z-index: 1;
width: 10%;
height: 20%;
background: #0000b3;
bottom: 0;
float: left;
}
.articleContent{
position: relative;
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
position: relative;
z-index: -1;
}
Here is where I am doing this, the blue divs would be pics (akin to thumbnails) that can be clicked. I want them to go all the way across:
/ScreenShot2013-01-09at85450PM_zps550e8e4a.png[/IMG]
Here's a fiddle:
http://jsfiddle.net/pureux/Er9eG/
You need a container for your gridPics and have it be absolute positioned (instead of the gridPics) at the bottom. Then float the gridPics inside of the container.
.picContainer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 50px;
}
.gridPics {
width: 50px;
height: 50px;
float: left;
display: block;
margin-right: 4px;
margin-top: 4px;
}
Is this what you're trying to do:DEMO
HTML
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<div class="gridPics"></div>
<div class="gridPics"></div>
<div class="clear"></div>
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS
.gridPics{
width: 10%;
height: 20px;
background: #0000b3;
float: left;
border:solid #FFF 1px;
}
.articleContent{
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
z-index: -1;
}