This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
I wanted to make an inline div using inline-block, but it doesn't work and either turns it turns one of the two divs below and the other above
#div-on-the-left {
background-color: #464886;
width: 200px;
height: 600px;
padding: 10px;
border: 10px double #2c2d54;
margin: 5px;
}
#big-div-on-the-right {
background-color: #AAABB8;
width: 600px;
height: 600px;
display: inline-block;
margin: 5px;
}
<div id="div-on-the-left">
<!--Some html-->
</div>
<div id="big-div-on-the-right">
<!--Some html-->
</div>
I also tried giving #div-on-the-left inline-block too, that brought #big-div-on-the-right above, but left a gap where #div-on-the-left was supposed to be and brought #div-on-the-left to the bottom, why is this happening?
YOu would be way better off using a grid or flexboxes. In this case flexboxes would be "easier" and "shorter". You main issue is, that both div-boxes have a different height. The left div-box have a height of 600px + (2x20px) = 640px because of the double border. the right div-box have a height of only 600px causing different line height and therefor will cause a line-break. Next, the minimum-width has to be set large enough to allow both boxes to be displayed next to each other.
In the snippet below, I wrapped both boxes inside a wrapper with a minimum width high enough to let them be displayed next to each other. Then I changed them to display: flex;.
The height for the right box was set to 640px becaue of the border mentioned above.
.wrapper {
min-width: 850px;
display: flex;
}
#div-on-the-left {
background-color: #464886;
width: 200px;
height: 600px;
padding: 10px;
border: 10px double #2c2d54;
margin: 5px;
}
#big-div-on-the-right {
background-color: #AAABB8;
width: 600px;
height: 640px;
margin: 5px;
}
<div class="wrapper">
<div id="div-on-the-left">
<!--Some html-->
</div>
<div id="big-div-on-the-right">
<!--Some html-->
</div>
</div>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
How to place div side by side
(7 answers)
Closed 7 months ago.
i am unable to place 2 divs side by side in effort to mimic a product display page in ecommerce site where image is displayed on the left and the following details on the right. mentioned below is my code. i am using display inline block to place 2 divs side by side. the right div doesnot seem to cover the 50 percent on the right side of the div. however when i make the 2 child divs as float left everything seems to work perfectly fine.. can any one explain how can i contain 2 child divs within a parent container div by using display inline block
<!DOCTYPE html>
<html>
<head>
<style>
section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 400px;
height: 400px;
border: 1px solid red;
}
.div1 {
width : 50%;
height : 100%;
background-color : lightblue;
display: inline-block;
}
.div2 {
width : 50%;
height : 100%;
background-color : lightpink;
display: inline-block;
}
</style>
</head>
<body>
<section>
<div class="container">
<div class="div1"> </div>
<div class="div2"> </div>
</div>
</section>
</body>
</html>
Believe it or not your issue was that the browser was putting a space character between each of your inline divs. If you remove the whitespace between the closing tag of the first and the opening tag of the 2nd div it will not include a space character then the line of "text" (including your divs since they are display: inline-block which makes them behave somewhat like text) will not wrap onto two lines.
I would recommend using flex or grid for a two column layout, as it will eliminate this issue of your HTML being so sensitive to the whitespace and indentation and the like.
section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 400px;
height: 400px;
border: 1px solid red;
}
.div1 {
width : 50%;
height : 100%;
background-color : lightblue;
display: inline-block;
}
.div2 {
width : 50%;
height : 100%;
background-color : lightpink;
display: inline-block;
}
<section>
<div class="container">
<div class="div1"> </div><div class="div2"> </div>
</div>
</section>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
When i resize my window to a smaller size, the first div goes down. It looks like it happens when the text of the second div break to a new line due to the resize of its box.
I don't understand why the first div is not staying at the top. It's not like i put a vertical align bottom on the container..
I'm aware of flex-box but i need to use inline-block in this project and i shouldn't have to use float in this situation, it should work without it..
https://jsfiddle.net/ezp0j7fu/
HTML
<div class="container">
<div class="left">LEFT LEFT LEFT LEFT </div>
<div class="right">RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT</div>
</div>
CSS
body {
line-height: 0px;
}
.container {
background: black;
height: 40px;
width: 100%;
line-height: 0px;
}
.container div {
display: inline-block;
margin: 0px;
padding: 0px;
line-height: 20px;
height: 100%;
}
div.left {
background: blue;
height: 100%;
width: 30%;
}
div.right {
background: green;
height: 100%;
width: 60%;
}
I've see this many times with in-line blocks. While I can't explain to you exactly why this happens (maybe someone with more indepth CSS knowledge can englighten us) to fix it you need only add a float property to the div.left tag. Then your left div and right div will both be at the top.
div.left {
background: blue;
height: 100%;
width: 30%;
float:left;
}
I have a problem with Firefox on a really specific graphic implementation.
I think you may understand the problem just by testing this fiddle: on firefox you'll see the problem, on any other browser you'll see the expected result (including IE9).
Design I need:
PNG illustration
I have a main block (dashed border) with a fixed width.
There is 2 lines, one above the other, within the main block. The 2 lines must be align on the right of the main block
Each line contains 2 children. The left ones have a dynamic text (gray background), the right ones are optionnals (blue background). The above right one contains an icon (orange) with a fixed width, the bellow right one is a dynamic temperature (with one decimal maximum).
Blocks are separated by a fixed 5px margin.
Texts and icon must be vertically centered.
In any case, the 2 lines need to have the same width: the smaller one takes the width of the bigger one.
If one line (or both) becomes too large for the main block, the left text (gray background) automatically linebreak.
HTML Code:
<div class="main-wrapper">
<div class="container">
<div class="content upper">
<div class="right-block"><!-- This block is optionnal -->
<div class="icon"></div>
</div>
<div class="left-block">
<div class="vertically-centered">
<p>
Some dynamic text
</p>
</div>
</div>
</div>
<div class="content lower">
<div class="right-block"><!-- This block is optionnal -->
<div class="vertically-centered">
<span>
21,5°
</span>
</div>
</div>
<div class="left-block">
<div class="vertically-centered">
<p>
Some other dynamic text
</p>
</div>
</div>
</div>
</div>
</div>
CSS Code:
/* utilities */
.vertically-centered {
display: table;
height: 100%;
width: 100%;
}
.vertically-centered > * {
display: table-cell;
vertical-align: middle;
}
/* custom styles */
.container {
display: inline-block;
float: right;
max-width: 100%;
}
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
}
.right-block, .left-block {
height: 100%;
}
.right-block {
float: right;
font-size: 42px;
margin-left: 5px;
background-color: lightblue;
}
.left-block {
font-size: 25px;
line-height: 25px;
overflow: hidden;
padding: 0 20px;
text-align: left;
background-color: lightgray;
}
.upper .right-block {
width: 85px;
}
.lower .right-block {
padding: 0 15px;
}
.icon {
position: relative;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
background-color: orange;
}
What I already tried:
Put a display: inline-block on the .left-block div, as suggested here, but it doesn't satisfy the need to have the same width on both lines.
Put a display: inline-block on the .content div; makes the line 100% width on other browsers, and create a big right gap within the .left-block on firefox.
Use white-space: nowrap on the .left-block; didn't help.
Make the .left-block div floating (right or left), but it doesn't work if the text is too large for the main container
And a lot of other things but not a single one compatible with all the browsers (Chrome, Firefox, Safari, IE9+, Edge)...
A precision although I don't think it will change anything: it is responsive.
I'm trying something with flexbox but... IE9... If anybody has a suggestion.
You can use the CSS word-break property to allow line breaks in the middle of long words:
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
word-break: break-all;
}
I found out a solution with flexbox!
I added a display: flex to the .content div with flex-direction: row-reserve to keep the order of the element and still be able to use float: right for IE9.
In addition, there is a flex: auto property on .left-block divs to take as much space as possible (Note: IE11 needs flex-basis to be set to be able to calculate the space wanted by the flex-grow property. That's why I used auto instead of 0 on the flex property. See details)
The completed CSS code
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
display: flex; /* Initialize flexbox */
flex-direction: row-reverse; /* keep the order of the element */
border: 1px dashed gray;
}
.left-block {
font-size: 25px;
line-height: 25px;
overflow: hidden;
padding: 0 20px;
text-align: left;
background-color: lightgray;
flex: auto; /* the text blocks take all the available space */
}
Here's the fiddle with the correction. Sometimes IE9 takes 2 lines of text instead of 1 (the text is 2px larger that the container, I don't know why...) but atleast it's readable!
I've got divs that are a fixed width and height and display in a row. The problem comes when I'm trying to make it responsive. I need the divs to stack in a row underneath eachother.
I made a fiddle http://jsfiddle.net/h657t6r2/1/ so you can see. If you play around with the width of the content window, you'll see the blocks stack but the 4th one then stacks underneath the 2nd one because it is center aligned. I want it to be center aligned because without it it leaves a big gap on the right and doesn't look good. A similar sort of stacking as on https://www.behance.net, except they never have a situation like mine where there's leftover blocks.
What I need is for the 4th block to stack neatly underneath the 1st block when the screen gets smaller and they stack.
FYI: The number of blocks is dynamic, it's not always 4.
<div class="content">
<div class="course_list">
<div class="box coursebox">
</div>
<div class="box coursebox">
</div>
<div class="box coursebox">
</div>
<div class="box coursebox">
</div>
</div>
</div>
.coursebox{
border: green 1px solid;
padding:10px;
width: 90px;
height: 90px;
margin: 0 20px 20px 20px;
display: inline-block;
}
.content{
text-align: center;
}
.course_list{
display: inline-block;
}
Per my comment
Since your blocks are fixed width anyway, you can center course_list and leave the blocks inside of it left aligned. Give course_list a width at different break points (media query) to have the ideal number of boxes per row. This is a cross browser solution
Here is an example of simplified version of what you had
http://jsfiddle.net/h657t6r2/2/
.coursebox{
border: green 1px solid;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 0 20px 20px 20px;
display: inline-block;
}
.course_list{
margin: 0 auto;
width: 560px;
}
#media (max-width: 559px) {
.course_list{
margin: 0 auto;
width: 280px;
}
}
As you can see I only have one break point for simplicity. You can put in as many as you need. Also note I got rid of the space in between your block's closing/opening tags to avoid the extra space when using display inline block
OR
You can have something even simpler like
http://jsfiddle.net/h657t6r2/3/
Set a % width for the centered container and let the blocks fall naturally
.coursebox{
border: green 1px solid;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 0 20px 20px 20px;
display: inline-block;
}
.content{
}
.course_list{
margin: 0 auto;
width: 80%;
}
This question already has answers here:
3 columns, center column fixed, sides fill parents
(3 answers)
Closed 8 years ago.
So what I want to achieve here is to have the red box a fixed width say 400px that is horizontally centered on the page. Either side of the red box is a green box and a lilac box of variable width that fill out the rest of the window horizontally and stretch to fit the window size.
So on a larger monitor the green and lilac boxes would be stretched horizontally and the red box in the middle of the page would remain the same width.
The solution would need to work in IE 8 and above ideally although I'm interested in solution that only work in IE9 + too.
You can use calc to solve this:
HTML:
<div class="green"></div>
<div class="red"></div>
<div class="lilac"></div>
CSS:
html, body {
width: 100%
}
.green {
width: calc((100% - 400px)/2); //takes the total space, minus the red box space, divided by two.
height: 200px;
background: green;
float: left;
}
.red {
width: 400px;
height: 200px;
background: red;
float: left;
}
.lilac {
width: calc((100% - 400px)/2);
height: 200px;
background: lavender;
float: left;
}
Proof of concept: http://jsfiddle.net/yERs7/
You can use display: table and have full compatibility even with IE8, as you asked
Example on codepen: http://codepen.io/anon/pen/emCFy/
Markup:
<div>
<section style="background: #91ee93">
Green</section>
<section style="background: #ee8c8f" role="main">
Red</section>
<section style="background: #e48fec">
Pink</section>
</div>
Css
div {
display: table;
table-layout: fixed;
width: 100%;
}
section {
display: table-cell;
}
section[role] {
width: 400px;
}
I created this quick JSFiddle hack for you.
Basically we let those three divs float next to each other, give the middle one a fixed width and use this markup on the other two:
width:50%;
padding-left: 150px;
margin-left: -150px;
box-sizing: border-box;
and
width:50%;
padding-right: 150px;
margin-right: -150px;
box-sizing: border-box;
Where 150 equals half of the middle div's width.