I'm trying to display two divs side-by-side with inline-block (can't use floats). Currently my CSS fails to do this. I realize this might be a duplicate, but having tried suggestions from related posts I still can't get it to work.
#wrapper {
display: inline-block;
width: 300px;
}
#images {
display: inline-block;
width: 100px;
}
#specs {
display: inline-block;
width: 100px;
}
<div id="wrapper">
<div id="images">
TEST Data
</div>
<div id="specs">
Test Data
</div>
</div>
#wrapper must have +200px of width
Modify css for #wrapper:
#wrapper{
display:inline-table;
width: 200px;
}
Width must be at least 200px, since you want two elements (100px each) to fix within.
example jsfiddle
The issue is that your wrapper div is only 100px wide, so the two sub-items can't fit side by side since they're also 100px wide. I made it much wider and they now appear side by side: jsfiddle
#wrapper{
display:inline-block;
width: 300px;
}
#images {
display: inline-block;
width: 100px;
}
#specs {
display: inline-block;
width: 100px;
}
wrapper is the same size as the contained elements #images and #specs, so make it width: 100% or something larger than 200px and those elements will line up horizontally.
div {outline: 1px dashed red;}
#wrapper{
display:inline-block;
width: 100%;
}
#images {
display:inline-block;
width: 100px;
}
#specs {
display:inline-block;
width: 100px;
}
<div id="wrapper">
<div id="images">
TEST Data
</div>
<div id="specs">
Test Data
</div>
</div>
Related
I have a container div (that cannot be floated) with two children elements. I want child elements to be on opposite sides - first on left, second on right. On 100% browser width children summary width is less than container, but on greater scales it is not, so container should be greater too. How to set container to grow when it's gloat child grow?
UPD: something like this
I need all elements to stay one line in any scale.
<div id="page">
<div id="container">
<div id="left">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<div id="right">
right
</div>
</div>
</div>
<style>
#page {
background-color: grey;
width: 100%;
height: 300px;
}
#container {
/*this styles are needed to other parts*/
position: relative;
clear: both;
/*=====================================*/
background-color:red;
height: 50px;
width: 90%;
margin: 0 5%;
}
#left {
float: left;
background-color: blue;
}
#left div {
width: 50px;
display: inline-block;
}
#right{
float: right;
background-color: green;
display: block;
max-width: 200px;
}
</style>
.container {
display: flex;
justify-content: space-between;
}
It should do that.
Google up FlexBox Introduction for good explaination.
something like this ?
I've used display:flex to let the two divs line up nicely, floats only needed for the inner boxed
https://jsfiddle.net/070rk2e1/1/
I have two divs next to each other. The div on the right is 300px x 335px. The div on the left goes all the way down the page. I want the width of the left div to go all the way until the right div. Then under the right div, it takes up the whole width of the page. Is this possible?
div elements are block level elements. So they are like square blocks. No, they can't work as you ask. However, you might Google for CSS Shapes to see if it can do what you wish but it's not available in all browsers and still isn't exactly the same as you request.
Here is some option either you can add min-width to the short div and long div to extend it. or you can add a background-color body to fake the illusion of it. but like Rob said there is no good way that can work out.
.short {
width: 100px; height: 100px;
background:red;
float:left;
//min-height: 500px;
}
.long {
width: 100px; height: 500px;
background:blue;
float:left;
//min-height: 500px;
}
.width {
width: 100%;
height: 200px;
background:yellow;
}
.clearfix {
overflow: auto;
zoom: 1;
}
body {
// background-color: red;
}
<div class="clearfix">
<div class="short"></div>
<div class="long"></div>
</div>
<div class="width"></div>
That is not possible, although you could always put another div under the one on the right and set the margin so that it looks like it's part of the one on the left.
This is one of the method to achieve what you want
CSS
#left1 {
margin-right: 300px;
height: 335px;
background: #aaa;
}
#right {
width: 300px;
height: 335px;
float: right;
}
#left2 {
background: #aaa;
border: 1px soild #000;
min-height: 300px;
}
<div id="right"></div>
<div id="left1"></div>
<div id="left2"></div>
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.