I have a div-container (colored blue) where I want to put 3 div-elements (colored red).
div-elements have to be vertically aligned (I just used margin-top: 10%; for that) and first one has to be left, second centered and third right in the same line. To achieve that I have made 3 ids #left, #center and #right.
However it all gets messed up when I put those ids in. First one is aligned allright, second one is centered but margin-top: 10%; doesn't affect it anymore and the third one is on the right side but in the new line.
I have tried putting display: inline-block; in my div-element class. This aligns right element correctly but messes up the center one.
Why is this happening and how do I solve this?
It is quite obvious that I have tried How to align 3 divs (left/center/right) inside another div? since I have used exact same ids, but the above mentioned solution doesn't work here and I have specifically asked why my margin-top: 10%; in .div-element doesn't affect center div
.div-container {
width: 50%;
height: 50%;
background-color: blue;
}
.div-element {
margin-top: 10%;
width: 20%;
height: 50%;
background-color: red;
}
#center {
margin: 0 auto;
}
#left {
float: left;
}
#right {
float: right;
}
<div class="div-container">
<div class="div-element" id="left">Left</div>
<div class="div-element" id="center">Center</div>
<div class="div-element" id="right">Right</div>
</div>
I would suggest using flexbox for this:
.div-container {
width: 50%;
height: 50%;
background-color: blue;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.div-element {
margin-top: 10%;
width: 20%;
height: 50%;
background-color: red;
}
<div class="div-container">
<div class="div-element">Left</div>
<div class="div-element">Center</div>
<div class="div-element">Right</div>
</div>
One of the easiest way for me to do this would be to use CSS grid to position the columns
<style>
.div-container {
display:grid;
grid-template-column: 3, 1fr;
width: 50%;
}
</style>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
I've been working independently on designing a website for a local company and I've been stuck on how to make my layout/design to work responsively. As of right now, my content looks similar to this:
However, as the browser screen decreases, or if the browser is already on a smaller resolution, Item 3 would shift below both Item 1 and Item 2 with a width of 100%. While both Item 1 and Item 2 would be inline with each other. Much like this:
Initially, I had both wrapping divs (1 and 2) set to display: inline-block. But I couldn't find any sort of research that said that (after changing inline-block div container 2 in a respective media query) a child element could be inline with a separate element while another child element in the same container would not. Recently, I've started debating the use of display: table , display: table-row , and display: table-cell to try and organize content in a table-like layout, but I couldn't find a way to assign Item 1 and Item 2 into their own row while excluding Item 3.
Honestly it's been a while since I've had to mess with anything HTML/CSS/JavaScript/etc., so I'm a little rusty. I'm hoping to see if anyone can point me in the right direction or give me some insight. Thanks.
I used fluid design with basic div's you can see here https://jsfiddle.net/74x5975j/6/
<div class="group">
<div class="box-1">BOX 1</div>
<div class="box-2">BOX 2</div>
<div class="box-3">BOX 3</div>
</div>
here is the CSS with media query:
.group {
width: 600px;
height: 300px;
}
.box-1 {
width: 50%;
height: 100%;
float: left;
background-color: gray;
text-align: center;
float: left;
}
.box-2 {
width: 50%;
height: 50%;
float: left;
background-color: blue;
text-align: center;
float: left;
}
.box-3 {
width: 50%;
height: 50%;
float: left;
background-color: red;
text-align: center;
float: left;
}
#media only screen and (max-width: 599px){
.group {
width: 100%;
height: 450px;
}
.box-1 {
height: 66.666%;
}
.box-2 {
height: 66.666%;
}
.box-3 {
width: 100%;
height: 33.333%;
}
}
I'm struggling trying to set up a really basic layout with CSS. I've created the following jsFiddle to help explain (code is copied below).
http://jsfiddle.net/drmrbrewer/10jq4zka/1/
Basically, what I want is for the first, second and third divs to be on one row, with the first and second divs positioned sequentially as far to the left as possible, and for the third div to be centred in the space that remains to the right of the second div. The row should fill 100% horizontally, so that when the window is resized the third div will remain centred within its space to the right of the second div, while the first and second divs remain static.
#outer-container {
position: absolute;
width: 100%;
}
#inner-container {
position: relative;
width: 400px;
}
#one {
width: 200px;
text-align: center;
float: left;
}
#two {
width: 200px;
text-align: center;
float: left;
}
#three {
width: 200px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="outer-container">
<div id="inner-container">
<div id="one">one</div>
<div id="two">two</div>
</div>
<div id="three">three</div>
</div>
I am not sure why you need the inner-container. You can achieve what you are looking for without using the inner-container (if the html is editable, ofcourse).
Let me explain it instead of just giving the code :
You can float the first two div's left. This will align them right next to each other. You can then add a text-align: center on the parent and that will take care of center aligning the third div.
You can check out the JSFiddle link http://jsfiddle.net/b5jk1d6k/ so that you can resize and see that the third div is center aligned on resizing the browser window.
div {
display:inline-block;
height: 100px;
width: 50px;
}
div.outer-container {
display: block;
text-align: center;
width: 100%;
}
.one {
background-color:orange;
float:left;
}
.two {
background-color:red;
float:left;
}
.three {
background-color:yellow;
}
<div class="outer-container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
Hope this helps!!!
Adding on to Satwik Nadkarny's Answer, if you know that div 1 and 2 are set to 200px you can set 3 to the remaining by giving the width of div 3 too:
width: calc (100% - 400px);
Which just gets the width of the browser window and subtracts the width of both divs 1 and 2.
div {
display:inline-block;
height: 100px;
width: 50px;
}
div.outer-container {
display: block;
text-align: center;
width: 100%;
}
.one {
background-color:orange;
float:left;
width: 200px;
}
.two {
background-color:red;
float:left;
width: 200px;
}
.three {
background-color:yellow;
width: calc(100% - 400px);
}
I have the following:
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
/* ???? */
}
I'm trying to make it so the clickable box will be centered inside the inner container IF there isn't enough room for another clickable box next to it.
BUT if there is enough width (600px +) then they create 2 columns (which are together centered inside the inner container), and if theres more room even (900px +) then 3 columns etc...
in other words, when I start out with a window of width 500px, it should show 1 column of boxes all lined up under each other. As I drag the window out, the box should stay in the center until theres enough room for another to go next to it, and they create 2 columns instead, and so on.
But I don't want the column to float left or right while I'm dragging the window and leave a big empty space
Try this CSS:
.container-main {
width: 100%;
}
.container-inner {
width: 99%;
text-align:center
}
.clickable-box {
display: inline-block;
width: 32%;
margin: 0 auto;
}
I think what you're looking for is to set clickable-box to display: inline-block. Setting display: inline-block essentially makes the div act like text in regards to text-align rules, but still keeps some block properties as well. It's pretty sweet.
HTML
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
CSS
.container-main {
background-color: red;
text-align: center;
}
.container-inner {
width: 90%;
}
.clickable-box {
background-color: blue;
width: 300px;
display: inline-block;
}
Here's a fiddle to demo it!
display:inline-block should be the best solution, this will display clickable boxes in one line if there is space for them:
.clickable-box {
width: 300px;
height: 300px;
display:inline-block;
}
Also add text-align:center to parent div in order for clickable boxes to be centered
.container-inner {
width: 90%;
text-align:center;
}
I think this should do it. I modified the CSS a bit to add some borders to see what the boxes look like. You could certainly remove those borders.
Fiddle Demo
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
border:3px solid #454;
text-align:center;
}
.clickable-box {
width: 300px;
height: 300px;
border:1px solid #000;
margin:0 auto;
display:inline-block;
}
I'd use float rules because they can push down the boxes that do not fit. For instance, float:left will get you at least two boxes on a 1096px. display:inline might have issues on browser rendering.
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
float:left; // right there.
}
I have a problem with some divs. In short here is what I need: 2 divs with a certain width (same width) - one with float left and one with right, and a third div that takes all the remaining space. The divs are using display : inline-block to have them on same line.
I have tried this :
<div class="wrapper">
<div class="control leftControl"></div>
<div class="display"></div>
<div class="control rightControl"></div>
</div>
And here is my css:
.wrapper {
width: 100%;
height: 100%;
min-width: 960px;
background-color: #E8E8E8;
}
.control {
width: 10%;
height: 100%;
display: inline-block;
background-color: #ADADAD;
}
.leftControl {
float: left;
}
.rightControl {
float: right;
}
.display {
width: 80%;
height: 100%;
display: inline-block;
}
The problem is that using % on some resolution causes the last div (controlRight) to be moved on a new line.I can understand why and found that if i use 79% on display the divs display almost correctly (1% left unsued.)
It is clear to me that this is not a correct solution.
Any help is appreciated.
You can put all your elements float:left and your 100% will always fit: fiddle
HTML
<div class="control"></div>
<div class="display"></div>
<div class="control"></div>
CSS
.control {
width: 10%;
height: 200px;
background-color: green;
float:left;
}
.display {
width: 80%;
height: 200px;
background-color:blue;
float:left;
}
Putting everything on float left will simply push divs one by one on the right.