So I currently have the following HTML/CSS:
<style type="text/css">
body {
background: #eeeeee;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px;
position: relative;
}
.row {
display: table-row;
max-width: 400px;
}
.td1,
.td2 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #ffffff;
font-size: 18px;
color: #333333;
}
.td2 {
border-top: none;
color: #777777;
position: absolute;
max-width: 400px;
right: 0px;
left: 0px;
}
.under_div {
position: relative;
}
</style>
<body>
<div class="table">
<div class="row">
<div class="td1">Some random text that changes and can change the height of this div/td</div>
</div>
<div class="row">
<div class="td2">Some random text that changes and can change the height of this div/td</div>
</div>
<div class="row">
<div class="under_div">
<p>Some random text that remains the same always
</div>
</div>
</div>
</body>
My problem is that the second td (td2) needs to be position: absolute. There is a reason why it is so, so therefore it just can't be a regular div, as that would make this much easier :)
So, as you can see the next in the under_div is occupying the same space as the td2div. What I would like is for that to right under the td2div. In principle I could just try to position it so that it fits right under. But as stated in text of the divs the text changes, and therefore the height will be random for both the td1 and td2 divs.
So is there a way where I can stack the under_div div just under the td2 div where it of course follows along according to whatever size the two other divs have, and not just stick around in one position ?
I have tried just making another table-div after the first one. But that doesn't seem to do anything either...
I think you need to rethink your design a little as I don't think it's possible to do this with an absolutely positioned element. You can accomplish what I believe you want using float and clear. An example jsfiddle is here.
Related
I'm trying to render column header text vertically, so the columns are narrow. I cannot seem to get the text to rotate and stay within the div.
I've made a quick jsfiddle.
https://jsfiddle.net/DaveC426914/w674sLbL/9/
My "pre-problem" is that my demo is not rendering correctly.
It's repeating the data three times i.e. three 17s, three 18 and three 19s. I don't know why.
(The barebones Angular fiddle I started from did not contain a div ng-app="myApp" so I had to add it or the angular is never applied. I thought maybe that had something to do with it, but remving this div breaks the app.)
Once I fix that, my real problem is that I can't get the text to behave. It should fall within the 100px tall, 20px narrow boxes that should be flush against each other, so that he columns are only 20px or so wide. They are rendering 100px wide.
<div class="table-header-cell" ng-repeat="item in headerDates">
{{item.date}}
</div>
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
height: 30px;
transform: rotate(-90deg);
transform-origin: left bottom;
width: 100px;
}
I've tried variants of nesting a div within a div, and applying the rotation to outer or inner divs. I've also tried setting width to 100px and height to 20px in the hopes that it applies the dimensioning before the rotation, but so far no combination has worked.
Try wrapping the text in an internal div and apply transforming and margin properties to that instead of all width and rotation on a single div.
Use the following html:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="table-header-cell" ng-repeat="item in headerDates">
<div class="innertext">
{{item.date}}
</div>
</div>
</div>
</div>
and the css:
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
width: 30px;
height:90px;
}
.table-header-cell .innertext {
transform: rotate(-90deg);
width: 150px;
margin: 0 -60px;
}
This should give you the results your looking for hopefully.
If this helps please mark the answer and vote it. Thanks
For the angular ng-repeat issue, you need to make sure your load type is "No wrap in Body" for your JavaScript, also you were loading Angular twice so I removed the second load.
And for the rotation, you should not rotate the container, but create an inner container and rotate on that.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="table-header-cell" ng-repeat="item in headerDates">
<div class="cell">
{{item.date}}
</div>
</div>
</div>
</div>
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
height: 100px;
width: 30px;
}
.cell {
transform: rotate(-90deg);
margin-left: -30px;
margin-top: 30px;
width: 100px;
}
Here is the corrected fiddle: https://jsfiddle.net/w674sLbL/10/
Hope this helps.
I have the following HTML:
<div id="chat">
<div id="content"></div>
>
<input id="field">
</div>
And the following styles.css:
#chat {
background-color: rgba(0,0,0,0.8);
width: 400px;
height: 200px;
position: fixed;
bottom: 10px;
left: 10px;
padding: 5px;
color: white;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
}
#content {
overflow-y: scroll;
width: 100%;
height: 90%;
}
#field {
width: 95%;
background-color: rgba(0,0,0,0);
color: white;
}
Which, when combined with my various bits of JS and node and so on, ends up looking like this.
I'm going to be adding jQuery UI to this in order to make div #chat resizable by edge dragging. I want:
div #chat to remain fixed to the bottom left corner of the window.
input #field to maintain a constant height, and change width to fit the width of div #chat, keeping in mind the greater than symbol positioned to its left.
div #content to be the same width as input #field and take up the remaining height.
Is this possible with pure CSS? If not, what's the cleanest way to do this? Thanks a bunch for the time and help, Reader. I appreciate it.
<div id="chat">
<div id="content"></div>
<label for="field">></label>
<input type="text" id="field" placeholder="enter"/>
</div>
add css
#field{
position: absolute;
bottom: 4px;
}
I'm trying to float three elements, no problem there. However in the two outside boxes I need to position an element vertically in the center, so I thought I would wrap them both in another div, float the wrapping divs and then absolute position the elements inside them and set the wrapping elements to position: relative; so it wouldn't mess with the layout and the three elements would stay floated correctly.
However it doesn't seem to have happened that way, the middle element still seems to get shoved all the way to the left.
My CSS:
.line_wrap {
float: left;
position: relative;
width: 366px;
min-width: 366px;
max-width: 366px;
}
.line_wrap .line {
position: absolute;
top: 25px;
left: 0;
width: 366px;
min-width: 366px;
max-width: 366px;
border-top: 1px solid #d9dce6;
}
.title {
float: left;
}
.title h2 {
font-weight: 300;
font-size: 37px;
color: #425080;
}
My HTML:
<div class="fee_header">
<div class="line_wrap">
<div class="line"></div>
</div>
<div class="title">
<h2>Standard Fees</h2>
</div>
<div class="line_wrap">
<div class="line"></div>
</div>
<div class="contentClear"></div>
</div>
Fiddle: http://jsfiddle.net/MN88R/
I'm trying to position the two elements on the sides so that the border of them ends up in the vertical center of the text in the middle.
If I understand what you are trying to achieve correctly, then I think you may be just approaching it from the wrong angle and perhaps should try something other than using the 3 floating boxes.
If your goal is to have the title center to it's parent container, and the border then run across the vertical center of the heading text, I would try something more like this:
CSS
.title {
height:20px;
overflow:visible;
border-bottom:1px solid #d9dce6;
margin-bottom:20px;
}
.title h2 {
font-weight: 300;
font-size: 37px;
color: #425080;
text-align:center;
}
HTML
<div class="fee_header">
<div class="title">
<h2>Standard Fees</h2>
</div>
</div>
Here is a link to a new fiddle:
http://jsfiddle.net/2KDQ4/1/
Just make sure that the font-size of your heading and the container div height are in the proportions that meet your needs. And the bottom-margin on title is set with what ever spacing you need.
I can't make it any clearer than this, sorry. I want to properly align 4 divs (on a width of 1150px as that is max-width of the content div) and upon resizing when it can't do 4, 3 in the center etc etc)
On >1150px screens it would/should like this: http://i.imgur.com/KaOPqZK.png. Now, the closest I can come is this: http://i.imgur.com/6khwQkR.png. I can set the first-child margin to 0 on the left one, but as there are multiple rows, those would still have the padding. Creating new rows as divs isn't possible either, because that would ruin everything when it's resized and only shows 3/1 on both rows.
When resizing it should center, with even margins on all sides, and not like this as it is right now: http://i.imgur.com/GiR1nZ2.png.
Basically all the code I have right now is this, simply because I know of no other way.
div.project-container {
float: left;
margin: 0 8px 30px 8px;
position: relative;
width: 270px;
}
I'm guessing it has to be Javascript who rescues the day, and I'm fine with that. Pointers in the right direction, examples on the internets, all is welcome. Thank you.
Adapted from an old answer :
HTML
<div id="container">
<div class="obj">1</div>
<div class="obj">2</div>
<div class="obj">3</div>
<div class="obj">4</div>
<div class="obj">5</div>
<div class="obj">6</div>
<div class="obj">7</div>
<div class="obj push"></div>
<div class="obj push"></div>
<div class="pushend"></div>
</div>
CSS
#container
{
max-width: 980px;
background-color: lavender;
display: inline-block;
text-align: justify;
}
.obj
{
width: 180px;
height: 180px;
background-color: lightgreen;
display: inline-block;
margin-bottom: 20px;
}
.obj.push {
height: 0px
}
.pushend {
width: 100%;
height: 0px;
display: inline-block;
}
demo
I'm having a hard time with what I thought would be a dead simple issue.
I'm trying to create a div that spans 100% of the width of a browser window. The div is filled with several child divs that expand to fill that entire space with alternating colors like a football field. These divs would expand to fit the full width of a given space that has individual 1% stripes that fill that space fully.
This seems to work fine in Firefox, but in Safari (and Chrome) the calculation seems to be too strict, and leaves some extra leftover space on the right-most div.
Is there any way to avoid this leftover space? I've encountered the same issue in Safari and Chrome even when placing it in a fixed width div... there is always space left over on the right. I wonder if I'm just asking it to do too much math?
Here is the code I am using, with alternate versions dividing the space into divisions of 5% and divisions of 1%. Sorry, it's long and redundant code.
<html>
<head>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.clearfix {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#field {
width: 100%;
background: #009900;
height: 100px;
margin: 0;
margin-bottom: 25px;
padding: 0;
}
.singleyard {
width: 1%;
float: left;
margin: 0;
padding: 0;
background: #009900;
}
.fiveyards {
width: 5%;
float: left;
margin: 0;
padding: 0;
}
.alt {
background: rgba(0,0,0,0.25);
}
.oneyard {
width: 20%;
float: left;
margin: 0;
padding: 0;
}
-->
</style>
</head>
<body>
<div id="field">
<div class="fiveyards">5</div>
<div class="fiveyards alt">10</div>
<div class="fiveyards">15</div>
<div class="fiveyards alt">20</div>
<div class="fiveyards">25</div>
<div class="fiveyards alt">30</div>
<div class="fiveyards">35</div>
<div class="fiveyards alt">40</div>
<div class="fiveyards">45</div>
<div class="fiveyards alt">50</div>
<div class="fiveyards">55</div>
<div class="fiveyards alt">60</div>
<div class="fiveyards">65</div>
<div class="fiveyards alt">70</div>
<div class="fiveyards">75</div>
<div class="fiveyards alt">80</div>
<div class="fiveyards">85</div>
<div class="fiveyards alt">90</div>
<div class="fiveyards">95</div>
<div class="fiveyards alt">100</div>
</div>
<div id="field">
<!--below section is repeated 10 times -->
<div class="singleyard">1</div>
<div class="singleyard">2</div>
<div class="singleyard">3</div>
<div class="singleyard">4</div>
<div class="singleyard">5</div>
<div class="singleyard">6</div>
<div class="singleyard">7</div>
<div class="singleyard">8</div>
<div class="singleyard">9</div>
<div class="singleyard alt">10</div>
<!--end repeated section-->
</div>
</body>
</html>
I had the same problem, this is what I discovered: somewhere in your CSS you have another div that has a width of 100% and ALSO has padding. Since the padding value is added to the width, the value of that div becomes greater than 100%. The solution is to make sure not to use padding on any div that is set to 100% width. If you need padding, try adding the padding to the element inside the div instead.
Only thing I can think of is to add:
html, body
{
width: 100%;
}
Just to make sure safari knows the parent container of field is also 100%;
Another thing to try is to add:
html { overflow-y: scroll; }
That should force a side scrollbar, even if it's grayed out. I wonder if some webkit rendering temporarily flashes a scrollbar, but fails to give the space back. Any of that work?
I have fixed mine by
body
{
background-color:#dddddd;
width:100%;
margin:0px;
}
I fixed by using display: table-cell
#field {
width: 100%;
background: #009900;
height: 100px;
margin: 0;
margin-bottom: 25px;
padding: 0;
display: table;
}
.singleyard {
width: 1%;
margin: 0;
padding: 0;
background: #090;
display: table-cell;
}
.fiveyards {
width: 5%;
margin: 0;
padding: 0;
display: table-cell;
}
From my experience on a similar issue. When your code will not stretch the entire way on the mobile device (but will on the desktop), fixing it is a matter of finding some element that is pushing the boundary invisibly. There should be some item that is breaking out of its boundary - for me it was a logo image that was sticking about 20px outside the header div. You can find this by giving everything a border or by eliminating one thing at a time. Once you have found it, you can move it or remove it in order to allow things to stretch the full way again.
I have fixed mine by adding
html, body
{
width: 100%;
margin: 0px;
}
happy coding!!!
Noticed this wasn't answered. I was having the same issue. I added the following lines to my CSS class:
margin-right:-10px;
margin-left:-10px;
adding min-width: 100% seems to do the trick