what i have is 3 divs, 1 for left 1 for center and 1 for right
what i need is 3 columns - the left is always there, the center as well but it's width should be adaptive if the right is there or not
<html>
<head>
</head>
<body>
<div style="width:460px; padding:0px 20px;">
<div style="float:left; background: red; width:100px;">
red
</div>
<div style="float:left; background: yellow; max-width:400px">
yellow
</div>
<div style="float:left; background: green; width:100px;">
green
</div>
</div>
</body>
</html>
what am i'm doing wrong?
The best I could come up with, in order to avoid JavaScript solutions and to use CSS and HTML only, is to use class-names for the columns, and to re-order your HTML in order that the right-most column is first in the html:
<div class="wrap" style="width:500px">
<div class="col right">Right Column</div>
<div class="col left">Left column</div>
<div class="col middle">Middle column</div>
</div>
<div class="wrap" style="width:500px">
<div class="col left">Left column 2</div>
<div class="col middle">Middle column 2</div>
</div>
With the CSS adjacent-sibling selector, firstSibling + secondSibling, this can be used to amend the width of the middle column:
.wrap {
width: 500px;
margin: 1em auto;
overflow: hidden;
}
.left,
.right {
width: 100px;
background-color: #ffa;
}
.middle {
width: 400px;
background-color: #f90;
}
.left,
.middle {
float: left;
}
.right {
float: right;
}
div.right + div.left + div.middle {
width: 300px;
}
JS Fiddle demo.
If you float the .middle column right, instead of left as in the previous example, then you can simplify the adjacent-sibling selector, and the HTML is, effectively, visually reversed (which is slightly easier to understand/work with than the above example wherein the two columns come first, in reverse order, and then the middle column comes at the end), giving:
<div class="wrap" style="width:500px">
<div class="col right">Right Column</div>
<div class="col middle">Middle column</div>
<div class="col left">Left column</div>
</div>
<div class="wrap" style="width:500px">
<div class="col left">Left column 2</div>
<div class="col middle">Middle column 2</div>
</div>
And the CSS:
.wrap {
width: 500px;
margin: 1em auto;
overflow: hidden;
}
.left,
.right {
width: 100px;
background-color: #ffa;
}
.middle {
width: 400px;
background-color: #f90;
}
.left {
float: left;
}
.right,
.middle {
float: right;
}
div.right + div.middle {
width: 300px;
}
JS Fiddle demo.
References:
Adjacent sibling selector, at the W3.org.
Width includes borders, you have to take that into consideration. If you decrease the width of the center element a bit, the right will not wrap.
I don't however see anything in your code which would handle the center width being "adaptive".
Not sure exactly what you're trying to do, but this might work. If you can give a little more detail about what it is supposed to do, it would help, but this seems to do what you want. If the right column is set to display:none then the center still goes all the way over.
<html>
<head>
</head>
<body>
<div style="width:480px; padding:0px 20px;">
<div style="float:left; background: red; width:100px;">
red
</div>
<div style="float:right; background: green; width:100px;>
green
</div>
<div style="background: yellow; width:100%;">
yellow
</div>
</div>
</body>
</html>
Related
I am having some difficulty with some html code (I have never done html programming of any significance) where I am trying to do something fairly simple. Actually I broke it down to the simplest form for now. So I have three blocks on top of each other. The first block at the very top has three sub boxes within it horizontally. I fixed the height of this block at 250px since my text fits into it. However my second block (Center) overlaps with the Top div. How do I specify that the center div start after the Top div? I want it to display a few pixels below the Top div.
<div id="Report" style="height: auto">
<div id="Top" style="width:inherit; height:250px">
<div id="First" class="TopMostLeft" >
<span style="font-family:Calibri; font-size:small">Info</span>
<table style="width:100%" > ... </table>
<div id="Second" class="TopMostCenter">
<span style="font-family:Calibri; font-size:small">Info2</span>
<div id="Third" class="TopMostRight">
<div id="About" class="TopRightDiv">
<table style="width:100%">
</div>
<div id="Center" style="border:solid; border-width:2px; border-color:lightgray; padding:4px; margin:10px">
<div id="Bottom" style="border-width:2px;border-width:2px; border-color:lightgray; padding:4px; margin:10px">
</div>
Here's what you need. Create a stylesheet so we can style it much better.
Working Fiddle: https://jsfiddle.net/v9jgj7n3/
I created your layout. This is how I understand what you need.
HTML
<div id="Report">
<div id="Top">
<div id="First" class="TopMostLeft" ></div>
<div id="Second" class="TopMostCenter"></div>
<div id="Third" class="TopMostRight"></div>
</div>
<div id="Center"></div>
<div id="Bottom"></div>
</div>
CSS
#Top {
width: 100%;
display: flex;
height: 250px;
}
#Top #First {
width: 10%;
background: red;
}
#Top #Second {
width: 40%;
background: blue;
}
#Top #Third {
width: 50%;
background: yellow;
}
#Center {
height: 200px;
width: 100%;
background: gray;
}
#Bottom {
height: 80px;
width: 100%;
background: black;
}
Edit the width and height to your desired value. This is how it will work
Also, I notice that you didn't close the child element of Top. You must always close DIV, so the HTML code will run well. It breaks your code.
Hope it helps. Cheers! Good Morning from Philippines.
Is it possible to fill an entire page with 16 divs but still have it responsive so it can be viewed on different devices. At the moment I have only used percentages but I am open to other solutions if there are any.
-How it is suppose to look.
The webpage has to contain 16 divs in total four spread across the top first quater of the webpage four spread across the second quarter of the page four spread across the third quarter of the page and four spread across the forth quarter of the page.
So overall it is suppose to look like a big cube or look like the 2408 game http://gabrielecirulli.github.io/2048/
-My code so far
***HTML***
<!doctype html>
<head>
<link rel="stylesheet" href="master.css">
</head>
<!-- ========================================================================================================================= -->
<div id="s1" class="divq"> </div> <div id="s2" class="divq"> </div> <div id="s3" class="divq"> </div> <div id="s4" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s5" class="divq"> </div> <div id="s6" class="divq"> </div> <div id="s7" class="divq"> </div> <div id="s8" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s9" class="divq"> </div> <div id="s10" class="divq"> </div> <div id="s11" class="divq"> </div> <div id="s12" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s13" class="divq"> </div> <div id="s14" class="divq"> </div> <div id="s15" class="divq"> </div> <div id="s16" class="divq"> </div>
<!-- ========================================================================================================================= -->
***CSS***
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.divq {
height: 25%;
margin: 0px;
width: 25%;
}
#s1 {
background-color: rgb(100,100,100);
float: left;
}
#s2 {
background-color: rgb(120,100,100);
}
#s3 {
background-color: rgb(100,120,100);
}
#s4 {
background-color: rgb(100,100,120);
float: right;
}
#s5 {
background-color: rgb(140,100,100);
float: left;
}
#s6 {
background-color: rgb(100,140,100);
}
#s7 {
background-color: rgb(100,100,140);
}
#s8 {
background-color: rgb(160,100,100);
float: right;
}
#s9 {
background-color: rgb(100,160,100);
float: left;
}
#s10 {
background-color: rgb(100,100,160);
}
#s11 {
background-color: rgb(180,100,100);
}
#s12 {
background-color: rgb(100,180,100);
float: right;
}
#s13 {
background-color: rgb(100,100,180);
float: left;
}
#s14 {
background-color: rgb(200,100,100);
}
#s15 {
background-color: rgb(100,200,100);
}
#s16 {
background-color: rgb(100,100,200);
float: right;
}
Make them all float: left, and don't forget to add box-sizing: border-box to all elements (via .divq)
That way you can add margings and paddings without breakting your grid.
If you are fine with flexbox, you can span four rows inside a wrapper with display: flex and flex-direction: column, each including four columns.
Sample Fiddle:
http://fiddle.jshell.net/n50tnnka/2/
Maybe you could try using a Bootstrap grid? It's fairly easy to use!
Just give your div's the class col-md-3. That way, the div's will know they can take up 3/12th of the screen = 25% = 4 divs per row.
If you then contain all these divs in one parent div with fixed width and height, you should be fine.
<div id="cube">
<div class="col-md-3" id="s1"></div>
<div class="col-md-3" id="s2"></div>
<div class="col-md-3" id="s3"></div>
<div class="col-md-3" id="s4"></div>
<div class="col-md-3" id="s5"></div>
<div class="col-md-3" id="s6"></div>
<div class="col-md-3" id="s7"></div>
<div class="col-md-3" id="s8"></div>
<div class="col-md-3" id="s9"></div>
<div class="col-md-3" id="s10"></div>
<div class="col-md-3" id="s11"></div>
<div class="col-md-3" id="s12"></div>
<div class="col-md-3" id="s13"></div>
<div class="col-md-3" id="s14"></div>
<div class="col-md-3" id="s15"></div>
<div class="col-md-3" id="s16"></div>
</div>
By still using the id's you can give any square the color you like, but by using bootstrap you won't have to use float.
You can do this easily with Flexbox like this
DEMO
.content {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
box-sizing: border-box;
}
.box {
flex: 25%;
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
For better browser support (than flex) you can use display table-cell for your elements
But you will have to nest each "row" (four divs) in a parent element:
HTML:
<div class="row">
<div id="s1" class="divq"> </div>
<div id="s2" class="divq"></div>
<div id="s3" class="divq"> </div>
<div id="s4" class="divq"> </div>
</div>
CSS:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
div {
box-sizing:border-box;
}
.row{
display: table;
table-layout: fixed;
border-spacing:0px;
width:100%;
height:25%;
}
.divq {
display:table-cell;
height: 25%;
width: 25%;
}
DEMO: https://jsfiddle.net/Nillervision/06z1L5tg/
I am using bootstrap and I have two container inside a bootstrap container. Like this:
<div class="container">
<div id="container-map">
aasdasd
</div>
<div id="container-buttons">
asdasda
</div>
</div>
What I am trying to do is center the two divs, #container-map and #container-buttons side by side, inside the main container.
This is my custom CSS for the two divs:
#container-map,
#container-buttons {
display: inline-block;
margin: 0 auto 0 auto;
width: 500px;
height: 500px;
}
Is there a reason you don't want to use the bootstraps built in gridsystem? Something like this?
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="container-map">
asdf
</div>
</div>
<div class="col-md-3">
<div class="container-buttons">
asdf
</div>
</div>
</div>
</div>
Just change your CSS to this
#container-map,
#container-buttons {
float: left;
margin-left: auto;
}
Both containers will be centered and side by side
You can try the code from this example (using text-align: center; on .container display:inline-block; for divs).
<style>
.container {
position:relative;
text-align:center;
}
#dv1, #dv2 {
display:inline-block;
width:100px;
margin:0 3px;
background:#33f;
}
</style>
<div class="container">
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>
</div>
you make both your divs to take equal height using flex. You can refer the link to find out the browsers which support it. Have a look at this:
.container {
display: flex;
width: 400px;
background: #eee;
}
.column {
flex: 1;
background: #fff;
border: 1px solid #ccc;
margin: 1px;
}
<div class="container">
<div class="column">
<p>aasdasd</p>
</div>
<div class="column">
<p>asdasda</p>
<p>asdasda</p>
</div>
</div>
I have some HTML code that looks like this:
<div class="container">
<div class="element"> </div>
<div class="element"> </div>
<div class="element"> </div>
<div class="element"> </div>
</div>
And I want to display it in a two-column layout, where each element is displayed directly underneath the one above. I've made a JSFiddle to show my current progress, but I can't figure out how to remove the white gaps between the elements. Is it at all possible, or do i need to change the HTML (I'd rather not)?
An easy way would be to wrap each column items into separate divs. Your .box and .one, .two, .three css declarations are interfering.
[http://jsfiddle.net/grLyvomy/][1]
You could use a seperate div for each column (in your case two).
.container{
border: 1px black solid;
width: 320px;
}
.clear{
clear: both;
}
.leftColumn{
width: 50%;
float: left;
}
.rightColumn{
width: 50%;
float: right;
}
.box:nth-child(2n+1){
background: green;
border-bottom: 1px solid red;
}
.box:nth-child(2n){
background: red;
border-bottom: 1px solid green;
}
.one{ height: 50px; }
.two { height: 80px; }
<div class="container">
<div class="leftColumn">
<div class="box one">first</div>
<div class="box two">second</div>
<div class="box three">third</div>
</div>
<div class="rightColumn">
<div class="box else">first</div>
<div class="box two">second</div>
<div class="box three">third</div>
<div class="box four">fourth</div>
<div class="box one">last</div>
</div>
<div class="clear"></div>
</div>
http://jsfiddle.net/nvmcxjpL/8/
Try to change one and three divs height sum same as two by changing three div height 20px to 30px
.three {
float: left;
width: 50%;
height: 30px;
}
i have problem with align divs inside main centered div.
Here is my code
<style>
body {
max-width: 1150px;
min-width: 900px;
margin:0 auto; }
.container {
text-align:center;
background-color:#e1e1e1; }
.box {
width: 250px; }
.inline-block {
color: #eee;
margin: 10px 0px 0px 10px;
text-align: center;
display:inline-block; }
.one {
height: 22px;
background: #744; }
</style>
<div class="container">
<div class="inline-block"><div class="one box">1</div>
</div>
<div class="inline-block"><div class="one box">2</div>
</div>
<div class="inline-block"><div class="one box">3</div>
</div>
<div class="inline-block"><div class="one box">4</div>
</div>
<div class="inline-block"><div class="one box">5</div>
</div>
<div class="inline-block"><div class="one box">6</div>
</div>
<div class="inline-block"><div class="one box">7</div>
</div>
<div class="inline-block"><div class="one box">8</div>
</div>
</div>
Result when i resize window
What i need
P.S. Sorry for my English, i hope you understand this.
Here is the DEMO
Just it's simple add Float:left to it
I think .container { text-align:left;} will do the trick for you, of course then you'll need .container > div { text-align:center;}. And I would also suggest to add classes to those divs so you don't have to use the immediate child selector.