I have this simple HTML code (I can't modify it, no divs in a div) :
<div id="container">
<div id="a">
Title col
</div>
<div id="b">
Left col
</div>
<div id="c">
Right col
</div>
</div>
It comes with this CSS code (I can only add rules, I can't delete code) :
#container {
width: 100%;
}
#a {
width: 400px;
margin: auto;
}
#b {
width: 300px;
float: left;
}
#c {
width: 100px;
float: left;
}
"b" and "c" div's are not horizontally centered, you can have a look at the result here : http://jsfiddle.net/x5qKN/
I want to horizontally center that two divs. I think it's easy, but I dont know how to do this. I tried different answers from this post : "How to horizontally center a <div> in another <div>?", but it does not solves the problem. Is there a solution ?
Thanks a lot (I hope it's not a duplicate post)
Sure, the trick is to not float, but display:inline-block the last two items, whilst setting text-align:center on the parent container. Setting the font size to zero then back means the items dont then have a space between them.
Demo Fiddle
div {
font-size:14px;
box-sizing:border-box;
}
#container {
width: 100%;
text-align:center;
font-size:0;
}
div:not(#container) {
text-align:left;
}
#a {
width: 400px;
border:1px solid black;
margin: auto;
}
#b {
width: 300px;
display:inline-block;
border:1px solid black;
}
#c {
width: 100px;
display:inline-block;
border:1px solid black;
}
Related
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 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>
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 want a layout with three boxes (two optional) like this:
[side box 1] [ main content
[side box 2] . main content ]
or
[ main content spans 100% if side boxes aren't provided ]
I want the main content box to span the entire height and width available in #load (minus margins) except if the side boxes are there, then I want it to only span up until those boxes (and their right margin).
My CSS:
#load {
margin: 10px;
height: 100%;
min-width: 1080px;
}
#primary,#secondaryOne,#secondaryTwo {
border-radius: 8px;
background: #f5f5f5;
border: 1px solid #ccc;
}
#primary {
float: right;
height: inherit;
width: 75%;
height:500px;
background:red;
}
#secondaryOne,#secondaryTwo {
min-width: 250px;
max-width: 300px;
height: 220px;
margin-right: 10px;
width: 20%;
clear:left;
float:left;
}
#secondaryTwo {
margin-top: 10px;
}
Simple HTML
<div id='load'>
<div id='primary'></div>
<div id='secondaryOne'></div>
<div id='secondaryTwo'></div>
</div>
JSFiddle
Problems
*SOLVED*Making #primary span the entire width if the sideboxes are missing.
*SOLVED*Is there a way to line the two sideboxes (#secondaryOne,#secondaryTwo) on the left side of #primary without nesting them in a separate div? If I use float: left on them, they line side by side, if I don't float them, the #primary generates below them, not beside them.
Solutions
Problem #1 was solved by joeytje50 using the secondary + primary tags and placing the secondary side boxes before the primary in HTML.
Problem #2 was solved in more than one way. The way I chose so that the secondary tags were placed together and before the primary was by NoobEditor using clear: left and a negative margin-top.
The solution can be found at: http://jsfiddle.net/v4cvv/67/
The main part of the solution is:
#primary {
width: 100%;
}
#secondaryOne + #primary, #secondaryTwo + #primary {
margin-top: -221px;
width: 75%;
}
Alternate Solution
One problem I found with the above solution, is it requires the two boxes and them to be the same height. A solution around this is by grouping the boxes in their own div. This solution is:
HTML
<div id='load'>
<div id="sideboxes">
<div id="boxOne" class="box"></div>
<div id="boxTwo" class="box"></div>
<div id="boxThree" class="box"></div>
</div>
<div id="primary" class="box"></div>
</div>
CSS
.box {
border-radius: 8px;
background: #f5f5f5;
border: 1px solid #fff;
}
#primary {
float: right;
display:block;
height: 97%;
width: 100%;
}
#sideboxes + #primary {
width: 75%;
}
#sideboxes {
float: left;
height: 97%;
width: 23%;
margin-right: 10px;
}
#sideboxes .box {
float: left;
height: 220px;
margin-bottom: 10px;
width: 100%;
}
The alternate solution no longer requires clear and can be extended for other uses. You may now also have 1, 2, 3, or however many boxes you want in the sideboxes div.
Thanks all for their help.
To answer your question about the primary box being 100% width when the secondary boxes are not there, you could do the following:
#primary {width:100%;}
.secondary + #primary {width:75%;}
If you put that CSS code at the bottom of your stylesheet, and then put the primary div tag after your first secondary div tag, then it'll by default be 100% wide, unless there's an element that has class="secondary". This won't change anything about the position the div is rendered, but it will fix your problem.
Alternatively, if your secondary divs are possibly hidden instead of not being there, you could do this:
#primary, .secondary.hidden + #primary {width:100%;}
.secondary + #primary {width:75%;}
That is, assuming you hide the secondary tabs via a class such as .hidden.
Here is a working version that becomes 100% width when the secondaries are removed, but still is 75% width when there is a .secondary element before it.
Keeping your HTML markup smae, here is the solution for your problem : demo
CSS
html.body {
height:100%;
}
#load {
margin: 10px;
height: 100%;
width:100%;
}
#primary, #secondaryOne, #secondaryTwo {
border-radius: 8px;
background: #f5f5f5;
border: 1px solid #ccc;
}
#primary {
float: right;
display:block;
height: 100%;
max-width:100%;;
width: 68%;
margin-top:-70%; /* this is the key */
}
#secondaryOne, #secondaryTwo {
width:30%;
height: 220px;
margin-right: 10px;
}
#secondaryTwo {
margin-top: 10px;
}
Problem #1
To get your #primary div to adapt it's width, you can use jquery to verify the presence of the .secondary divs and to set the an other width to the #primary div.
With .secondary demo
without .secondary demo
JQUERY:
if ($('.secondary').length){
$('#primary').css('width', '75%');
}
Problem #2
You can use clear:left; and by changing the order of the divs in your html markup you will have your 2 divs stacked on the left and your content div on the right.
FIDDLE
HTML:
<div id='load'>
<div id='primary'></div>
<div id='secondaryOne' class="secondary"></div>
<div id='secondaryTwo' class="secondary"></div>
</div>
CSS :
.secondary{
clear:left;
float:left;
}
Try
#primary {
min-width:75%;
max-width:100%;
}
http://jsfiddle.net/Paramasivan/v4cvv/65/