This is how my webpage is currently looking:
And what I want is for the height of box 1 to be equal to be the height of box 3, if there was more text to be added to box 1 or 3 etc (and the same for boxes 2 and 4, at the same time).
I also want the length of which ever side is shorter, to be extended so that it is the same length of the longer side, resulting in both sides (green box and 4 boxes combined) having the same height.
More basically: Boxes 1, 2, 3 and 4 all have the same height. The 4 boxes and green box both extend downwards if necessary to the same height, so that the green box's height is roughly double the height of one smaller box.
This is my code currently:
<div class="container">
<div class="row">
<div class="col-xs-6" id="big-box">
<div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="mini-box" id="firstBox">1</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="secondBox">2</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="thirdBox">3</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="fourthBox">4</div>
</div>
</div>
</div>
</div>
</div>
With some basic CSS to change the looks of the text and background colour etc.
I have tried playoing around with Javascript, Bootstrap, and CSS properties to try and make this possible, but so far nothing has worked. Any help?
Thanks in advance
I personally don't like the bootstrap class names but that is beside the point. So I think you need to change the CSS:
.row {
position: relative; // set bounds for mini-box absolute.
}
.mini-box {
position: absolute;
top: 0px;
bottom: 0px;
}
I'm not a big fan of bootstrap so i have a alternative,
flexbox. the parent has a height: 200px; were every child in that wil align too but i couldn't fix it with a second child with in the row. so i fixed it with height: 95px; because of the 10px margin
.parent {
align-items: flex;
display: flex;
height: 200px;
}
row {} .child1 {
background-color: green;
color: #fff;
width: 300px;
margin: 0 10px;
}
.child2 {
background-color: grey;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child3 {
background-color: red;
color: #fff;
margin: 0 10px;
height: 95px;
}
.child4 {
background-color: pink;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child5 {
background-color: black;
color: #fff;
margin: 0 10px;
height: 95px;
}
<div class="parent">
<div class="child1">text big</div>
<div class="row">
<div class="child2">text 1</div>
<div class="child3">text 2</div>
</div>
<div class="row">
<div class="child4">text 3</div>
<div class="child5">text 4</div>
</div>
</div>
css tricks for more info over flexbox
Related
I have some div boxes in my html and they are formatted the way I want.
Whenever I use JavaScript to change the value of one of the boxes it changes the formatting.
Why is that? And how do I prevent it from doing that?
document.getElementById("0").innerHTML = 20;
body {
background-color: red;
width: 1000px;
margin: 10px;
}
#top {
display: block;
width: 200px;
height: 100px;
}
#bottom {
display: block;
width: 200px;
height: 100px;
}
.box {
height: 94px;
width: 96px;
border: 1px solid white;
display: inline-block;
}
<div id="board">
<div class="row" id="top">
<div class="box" id="0"></div>
<div class="box" id="1"></div>
</div>
<div class="row" id="bottom">
<div class="box" id="2"></div>
<div class="box" id="3"></div>
</div>
</div>
Here is my JSFiddle:
https://jsfiddle.net/pb4759jh68/arbsws5u/
In my fiddle I have my JavaScript statement active, you can comment it out to see what it does to my formatting.
Thanks!!!
It's actually not the JS, but due to the content being added. They align at first because there's no content, but once you add in content, it tries to line up the text with the bottom of the next block. You can avoid this by setting:
vertical-align:top;
to the box class.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have an example Calendar Days
.month-days-wrapper {
display: inline-block;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div style="z-index: 1; position: relative; left: 21px; top: 5px; width: 174px; height: 20px; background-color: green; border-radius: 5px" onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
Squeeze the Result horizontally and you will see the days are responsive.
(Totally ignore the green line please as that will be taken care of by server side coding.)
The challenge is to make the text “Tom Jones – $4,000” responsive also.
Can this be done via CSS and maybe JS as well?
Edit
Please have a look at this image as it will hopefully explain what I am getting at clearly.
More Detailed Image http://d29u7d0naxols0.cloudfront.net/TextFlowsWithDays.jpg
More edit.
Background: This is a monthly line calendar for a booking app whose days move to the second row, third row, etc when its container is narrowed. This works perfectly well.
12 months-at-a-time are shown on the web page.
When a property is booked the calendar needs to show the Name and $Amount starting ON THE FIRST DAY of the booking.
When the calendar is narrowed and a day goes to the following row the text must track the day as shown in the image above.
Boundary Conditions
A booking may be one night or 100s of nights.
If a short booking and all text cannot be fitted in then finish it with ellipsis.
The text must flow across month boundaries. eg booking starts on Nov 30 so text must flow to Dec 1 etc
If anyone can do this then I will pay an agreed amount otherwise I will go to Freelancer.com. (I am offering the $s here as people have made an effort already and should be rewarded if they can "bring home the goods".)
Cheers
You do not need js, you can use scalable values for your text on font-size
vh is the percentage of the height
font-size:2vh
vw is the percentage of the width
font-size:2vw
vmin is the percentage of the shorter one (useful for mobile)
font-size:2vmin
vmax is the percentage of the longer one
font-size:2vmax
Its hard to get a feel for exactly what you're going for here, but here are a couple of thoughts.
In your original code, the green background booking info is part of the div for the day on which it starts. As long as you do things this way, it will never scale properly when you adjust the screen size.
With that in mind, here is a modified code which moves the booking info to the end of the date container, which will keep it there as you resize the page.
</head>
<body>
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We
</div>
<div class="day-body">
<div class="day-body-day">25
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th
</div>
<div class="day-body">
<div class="day-body-day">26
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr
</div>
<div class="day-body">
<div class="day-body-day">27
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa
</div>
<div class="day-body">
<div class="day-body-day">28
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su
</div>
<div class="day-body">
<div class="day-body-day">29
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo
</div>
<div class="day-body">
<div class="day-body-day">30
</div>
</div>
</div>
<div class='text-container' onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000
</div>
</div>
</div>
</div>
</body>
</html>
.month-days-wrapper {
display: inline-block;
position: relative;
}
.day-wrapper {
float: left;
}
and the CSS:
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.text-container {
z-index: 10;
position: absolute;
left: 21px;
bottom: 5px;
width: 174px;
height: 20px;
left: 50%;
margin-left: -87px;
background-color: green;
border-radius: 5px;
}
However, as a related point, is this is part of a larger application (looks like it might be related to some kind of booking system), you might want to consider dynamically setting the background colors of the date divs rather than putting this overlay on them. It will be much less finicky. Just a thought.
Good luck, and welcome to Stack Overflow!
A little tricky, but I think this is what you need JSfiddle
Splitted the word in multiple containers and gave them display:inline-block
Maybe you cold try a trick with line-height, then use an extra span container (or child div itself), position:absolute and word-wrap/word-break :
.end-ellipsis class is removed.
remove test width from .month-days-wrapper to test on resize or play with http://codepen.io/anon/pen/dYBypL .
.month-days-wrapper {
display: inline-block;
width: 160px;
position: relative;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.brlines {
z-index: 1;
position: absolute;
max-width: 100%;
text-align: left;
margin-top: -1.6em;
text-indent: 1em;
word-wrap: break-word;
word-break: break-all
}
.brlines span {
display: inline;
word-wrap: break-word;
word-break: break-all;
line-height: 5em;
background-color: green;
border-radius: 5px;
padding: 0 1em;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div class="brlines">
<div onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');"><span>Tom Jones - $4,000</span>
</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
I am not very good with CSS, so I am posting my problem here hoping for a solution:
What I need is following:
I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.
Like so:
2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)
If you will please consider in the dashes as a proper bar (like 10px height for e.g.). You might notice that 50% and 80% have ---- while 100% has ====.
This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.
I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.
So far, I have following HTML/CSS:
<div style="padding-top: 10px;padding-bottom:10px; width:100%">
<div style='float:left'><strong>Date </strong>{{Today.date}}</div>
<div style='float:left;background-color:red;width:100%'></div>
</div>
The above code does not even show the second div with red background :(
Any pointers in helping me solve this is very much appreciated!
Flexbox could help here depending on your browser support requirements.
.wrap {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar {
height: 10px;
background: #f00;
}
.bar-50 {
flex: .5;
}
.bar-80 {
flex: .8;
}
.bar-100 {
flex: 1;
}
<div class="wrap">
<div class="date">2015-11-17</div>
<div class="bar bar-50"></div>
</div>
<div class="wrap">
<div class="date">2015-11-18</div>
<div class="bar bar-80"></div>
</div>
<div class="wrap">
<div class="date">2015-11-19</div>
<div class="bar bar-100"></div>
</div>
Sneaky version with pseudo-element instead of extra HTML
.bar {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar::after {
content: '';
height: 10px;
background: #f00;
}
.bar-50:after {
flex: .5;
}
.bar-80:after {
flex: .8;
}
.bar-100:after {
flex: 1;
}
<div class="bar bar-50">
<div class="date">2015-11-17</div>
</div>
<div class="bar bar-80">
<div class="date">2015-11-18</div>
</div>
<div class="bar bar-100">
<div class="date">2015-11-19</div>
</div>
Perhaps more semantically, use a progress element and a label.
Progess Element # MDN
div {
margin: 10px;
}
<div>
<label for="alpha">2015-11-17</label>
<progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
<label for="beta">2015-11-18</label>
<progress id="beta" value="70" max="100">70 %</progress>
</div>
<div>
<label for="gamma">2015-11-19</label>
<progress id="gamma" value="100" max="100">70 %</progress>
</div>
You can try this
<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
<div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
<div style="float:left;width: 50%;height: 10px;display: inline-block;">
<div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>
I need to set the width of a div depending on the page size.
I have three columns. The first and third ones are 50px fixed. I need to set my middle one so it will take all the space with a small margin. I haven't found how to do it in CSS. So I tried using Javascript with window.innerWidth and subtracting the two 50px.
Here is my CSS :
<div class="col1">
...
</div>
<div class="col2">
<div class="col2-1">
...
</div>
<div class="col2-2">
...
</div>
</div>
And the corresponding Javascript
<script type="text/javascript">
setStoreInfoWidth = function () {
$('div.col2-1').css('width', window.innerWidth-100 + 'px')
};
setStoreInfoWidth();
$(window).resize(function () {
setStoreInfoWidth();
});
</script>
Here is a JsFiddle with the code working : http://jsfiddle.net/MrYUb/
However, I can't make it work on my actual website.
Do you have any idea why?
You can use negative margins to create a 3 column layout:
http://jsfiddle.net/teynon/J2mx7/2/
<div class="container">
<div class="leftCol">
Left stuff
</div>
<div class="rightCol">
Right Stuff
</div>
<div class="middleCol">
Middle stuff
</div>
</div>
<div style="background-color: #0000BB; clear: both;">Test</div>
CSS:
.container {
width: 100%;
position: relative;
}
.leftCol {
float: left;
margin-right: -50px;
width: 50px;
left: 0px;
min-height: 100px;
background-color: #FF0000;
}
.rightCol {
width: 50px;
margin-left: -50px;
right: 0px;
min-height: 50px;
background-color: #00FF00;
float: right;
}
.middleCol {
margin: 0px 55px 0px 55px;
background-color: #0000FF;
min-height: 50px;
}
Why not using percent? If you have 2 divs, that 'll make 50% for each.
I have this code
<div style="position: relative;">
/***main***/
<div style="top:0">
/*****Content1****/
</div>
<div>
/*****Content2****/
</div>
<div>
/*****Content2****/
</div>
<div style="bottom:0">
/*****Content4****/
</div>
</div>
I want content1 always at top and content4 always at bottom, also want content2 and content3 adjust top and bottom margin equally so that it look even, I am unable to do this, as parent div is of variable height and all other divs are of fixed height.
I think this will help you to understand what I want
http://www.spoiledagent.com/ads/Help.jpg
Please help,
You can try this:
http://jsfiddle.net/Q4XaQ/
<div id="main">
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
</div>
#main{
margin: 0 auto;
width: 960px;
background: red;
}
#content1{
height: 80px;
background: gray;
}
#content2{
width:480px;
height: 300px;
float: left;
background: yellow;
}
#content3{
width:480px;
height: 300px;
float: right;
background: brown;
}
#bottom{
height: 50px;
clear:both;
background: blue;;
}