I've recreated my issues with this jsfiddle
My date div on the right get moved down if the window becomes too small when re-sized (thinking mobile device view)
Is it possible to re-size the text area and keep the date div at the top when re-sized?
I've included two screen showing the issue when re-sized.
Screen 1
Screen 2 (re-sized)
My current css looks like this:
div.thumbnail_image {
float: left;
height: 64px;
position: relative;
width: 64px;
}
.widget-content {
padding: 12px 15px;
border-bottom: 1px solid #cdcdcd;
}
.msg-list {
border-top: 1px solid #DDDDDD;
padding: 10px 12px;
}
.msg-list span {
display:block;
}
.msg-list .msg-date {
display: block;
border: solid 1px #00ff00;
color: #BBBBBB;
float: right;
margin: 0 0 0 0;
text-align: center;
width: 50px;
}
.msg-list .msg-date .msg-month {
display: block;
font-size: 19px;
font-weight: bold;
margin-bottom: -4px;
}
.msg-summary {
border: solid 1px #ff0000;
display: block;
float: left;
max-width: 70%;
}
One way to achieve that is to remove the float: left from .msg-summary and give it a margin to the right to reserve the space for the date-div, see http://jsfiddle.net/ZybhC/2/
You can achieve such a design by ordering your elements like this:
image
date
text
All you need then is float the image div left, float the date div right, apply margin to the text div equal to the other divs width:
.middle {
float:none;
margin:0 64px;
}
.date {
float:right;
}
.msg {
width:50%;
min-width:200px;
}
Demo: http://jsbin.com/ofevot/1/edit
Related
Why is the floated image being moved next to a paragraph inside of a div move outside of that div when I float other div elements?
For example, I have a div class with a paragraph in it and that when I float the image inside of that class it wraps around it the way I want?
.container {
margin:0px auto;
width: 1400px;
background-image: url(back.png);
padding-top:10px;
height: 2000px;
}
.main {
background-color: #f7f4f4;
margin-right: 600px;
box-shadow: 10px 10px 10px #705656;
border-radius: 10px;
border: 2px solid red;}
.green {
border: 2px solid blue;
width: 400px;
margin-right: 40px;
background-color: #8bed8f;
float: right;}
.aside {
background-color: #f47575;
width: 400px;
margin-right: 40px;
border-radius: 4px;
float: right;
clear: right;}
.trac input[type=button] {
background-color: #9b878b;
font: weight: bold;
font-size:15px;
color: white;
border-radius: 6px;
border: none;
padding: 20px 10px;
margin-left: 300px;
margin-top: 5px;}
.tmac {
float: left; }
If I understanded your problem (the question you asked is a bit messy), you have to consider that floating HTML elements wraps to the closest position relative container.
If you want to stick a float to a specific container, you just have to add to the CSS class of that container the rule position: relative
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
I have a small question. Normally I would be ok with the divs rearranging on the screen if the screen is smaller, but for this particular case- I want them to remain the way they are no matter.
I think its the inline-block that may be causing this, but I need all the 4 color rectangles to display the way they display on large screen--throughout (the colorful blocks are 2x2 and the big ones are side by side as well).
When the screen is scaled, it places all on top of one another. I actually do not want this effect--how can this be avoided?
#tools{
background-color: #EEAD0E;
cursor:pointer;
}
#corner{
background-color: #009ACD;
cursor:pointer;
}
#expert{
cursor:pointer;
background-color:#BDD09F;
}
.floating-box {
display: inline-block;
width: 380px;
height: 105px;
margin: 10px;
border: 3px solid #73AD21;
}
#pres{
background-color: #00FF00;
cursor: pointer;
}
#discussions{
background-color: green;
cursor: pointer;
}
.floating-box2 {
display: inline-block;
width: 350px;
height: 305px;
margin: 10px;
border: 3px solid #d3d3d3;
}
<div class="floating-box2"></div>
<div class="floating-box2"></div>
<div id="expert" class="floating-box">
<img src="image.png"/></div>
<div id="tools" class="floating-box"><img src="image2.png"/></div><br>
<div id="discussions" class="floating-box"><img src="image3.png"/></div>
<div id="corner" class="floating-box"><img src="image4.png"/></div>
when you have a fixed with like you have width:380px it's obvious they won't fit together. you need to set a percentage width.
see here jsfiddle
if you add text , add vertical-align:top to the floating boxes. this is because display:inline-block automatically implies vertical-align:baseline
code:
#tools{
background-color: #EEAD0E;
cursor:pointer;
}
#corner{
background-color: #009ACD;
cursor:pointer;
}
#expert{
cursor:pointer;
background-color:#BDD09F;
}
.floating-box {
display:inline-block;
width: 49%;
height: 105px;
box-sizing:border-box;
border: 3px solid #73AD21;
vertical-align:top;
}
#pres{
background-color: #00FF00;
cursor: pointer;
}
#discussions{
background-color: green;
cursor: pointer;
}
.floating-box2 {
display:inline-block;
width: 49%;
height: 305px;
border: 3px solid #d3d3d3;
box-sizing:border-box;
vertical-align:top;
}
How can i make a parent div (red) stretchable so that min number of chidren inside it can be one and maximum number can be 3 after which the fourth div sets vertically down automatically.
My css for inner div is
.inner_div {
min-height: 238px;
border-bottom: 1px dashed #e7e7e7;
border-right: 1px dashed #e7e7e7;
border-top: 1px dashed #e7e7e7;
border-left: 1px dashed #e7e7e7;
padding-top: 10px;
padding-bottom: 10px;
float: left;
padding: 9px;
width: 200px;
background-color: white;
}
and css for parent (outer div) is
.outer_div {
padding: 0 20px;
margin-top: 55px!important;
margin-bottom: 33px!important;
background: white;
border-left: 1px dashed #e7e7e7;
overflow: hidden;
max-width: 611px;
min-width: 223px;
width: auto;
}
Let's Get Fluid!
There are a lot of answers here!
The following example works across all screen sizes / widths for up to 3 boxes across.
That #media is used to give and take borders away at each viewport width, one column up to three columns. It also re-sizes the outer div for each step, and changes the background colour, etc if wanted. Refer to the comments in the snippet for a basic explanation of what's going on.
This example can consume as many or as few boxes as you want. Open it full screen and resize to see the results.
Update - I have given the inners a dark green background and the outer is display: inline-block to resize with its contents.
* {
box-sizing: border-box;
/* incorporate padding into width (.outer_div padding is excluded) */
}
.outer_div {
margin: 50px;
display: inline-block;
max-width: 640px;
min-width: 240px;
/* 200 * 3 across + 40 .outer_div padding = 640 */
padding: 20px;
/* transition? yes! on re-size! */
transition: background 1s;
transition: max-width 0.05s;
}
.inner_div {
min-height: 238px;
/* BORDER ALL THE THINGS!!!*/
border: 1px dashed #000;
float: left;
padding: 9px;
/* padding is accounted for in the width thanks to border-box */
width: 200px;
background: #0a8f08;
}
/* Clear the floats at the very end */
.outer_div:after {
content: ' ';
display: block;
clear: left;
}
/* 3 boxes across */
/*#media sizes increase and decrease dependant on inner box width and outer_div padding */
#media screen and (min-width: 756px) {
.outer_div {
background: #a3e9a4;
}
/* Remove all bottom borders */
.inner_div {
border-bottom: none
}
/* Remove every middle border */
.inner_div:nth-child(3n+2) {
border-right: none;
border-left: none;
}
/* Last child gets a right border */
.inner_div:last-child {
border-right: 1px dashed #000;
}
/* last three get a bottom border */
.inner_div:nth-last-child(-n+3) {
border-bottom: 1px dashed #000;
}
}
/* 2 boxes across */
#media screen and (min-width: 573px) and (max-width: 755px) {
.outer_div {
max-width: 440px;
background: #dcedc8;
}
/* Remove all bottom borders */
.inner_div {
border-bottom: none;
}
/* Remove every second border */
.inner_div:nth-child(2n) {
border-left: none;
}
/* last two get a bottom border */
.inner_div:nth-last-child(-n+2) {
border-bottom: 1px dashed #000;
}
}
/* 1 box across */
#media screen and (max-width: 572px) {
.outer_div {
max-width: 240px;
background: #f0f4c3;
}
/* Remove all bottom borders */
.inner_div {
border-bottom: none;
}
/* last one gets a border */
.inner_div:last-child {
border-bottom: 1px dashed #000;
}
}
<div class="outer_div">
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
</div>
You should probably add some pixels to you outer_div's max-width, otherwise 3 inner_divs just don't fit:
max-width: 660px;
And then clear every third inner_div:
.inner_div:nth-of-type(3n+1) {
clear: left;
}
Here's a jsfiddle.
Just change your outer div css with this
.outer_div {
padding: 0 20px;
margin-top: 55px!important;
margin-bottom: 33px!important;
background: white;
border-left: 1px dashed #e7e7e7;
overflow: hidden;
max-width: 100%;
min-width: 223px;
}
You can try following code change parameter as your needs proportionally.
display:inline-block; can do the tricks
.outer_div{
display:inline-block;
max-width:300px;
height:300px;
background-color:red;
overflow:auto;
}
.inner_div{
width:100px;
height:100px;
background-color:black;
float:left;
}
In inner-div class add this line
display:inline-block;
and outer-div must be like this
.outer_div {
padding: 0 20px;
margin-top: 55px!important;
margin-bottom: 33px!important;
background: white;
border-left: 1px dashed #e7e7e7;
overflow: hidden;
max-width: 669px;
min-width: 223px;
}
You can always change max-width to get more free space for fourth block or remove third block!
Use the :nth-child pseudo class.
To make the parent div stretchable, add a float: left or display: inline-block.
.outer_div {
padding: 0 20px;
margin-top: 55px!important;
margin-bottom: 33px!important;
background: white;
border-left: 1px dashed #e7e7e7;
overflow: hidden;
width: auto;
float: left;
clear: both;
margin: auto;
}
.inner_div {
min-height: 238px;
border: 1px dashed #e7e7e7;
float: left;
padding: 9px;
width: 200px;
background-color: white;
}
.inner_div:nth-child(3n+1) {
clear: left;
}
You can see the result in jsfiddle.
I would use something like flexbox for this kind of thing.
There would be a lot of possibilities/combinations, and would also be very easy to edit if required.
The likes of:
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
Here's an example of just one possibility.
Browser support:
See here
My case is as follows. I have a div with two children divs. I'd like the 'event' div to be 300px of width and height. First requirement is to keep the size of the 'event' div when 'content' and 'bar' elements use 100% of parent's width. Secondly as for now, borders of 'content' element are not visible. Is it possible to fit everything inside without using hardcoded values and get this display properly in most of the modern browsers (FF, Chrome, Opera, IE7+) ?
This is what I'd like to achieve (notice the left red bar which takes 100% height and doesn't collide with the grey border around the event element):
And this is what I have. Html :
<div id="wrapper">
<div id="scheduler">
<div class="event" style="top: 30px; height: 300px; width: 300px">
<div class="bar"></div>
<div class="content">
<div class="inner-content">Some text</div>
</div>
</div>
</div>
</div>
, css :
#wrapper {
width: 600px;
height: 600px;
}
#scheduler {
background-color: #E1FFFE;
display: block;
height: 100%;
width: 100%;
padding: 0 10px;
position: relative;
}
#scheduler .event {
display: block;
float: left;
position: relative;
width:100%;
overflow:hidden;
}
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 100%;
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: none;
display: inline;
float: left;
height: 100%;
position: absolute;
width: 100%;
}
and a runnable demo :
http://jsfiddle.net/6nTvD/1/
Try this. Take out the bar div, then change the .content css to:
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: 5px solid red; // replaces the bar
display: inline;
float: left;
height: 99%; // a bit of a hack to fit the border in
position: relative;
width: 98%; // hack
}
http://jsfiddle.net/Dp3yz/
EDIT: Code with the .bar still in place:
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 99.9%; /* Small offset at bottom */
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
/* revised border */
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
display: inline;
float: left;
height: 99%;
position: absolute;
width: 98%;
}
New version:
http://jsfiddle.net/JJrC9/1/
I don't think I fully understand your quandary, however, with the only difference I can spy between your desired outcome and your current work being the presence of the borders -- switching overflow:hidden; on #scheduler .event to overflow:visible; produces something that visually looks to me like it achieves the desired affect.