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.
Related
I have four tabs developed with HTML5/CSS3/JS shown below.
I have used display:inline-block; for tab divs and text-align:center for their parent div to locate all four tabs at the center of the page.
<div class='parent'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem'>HELP</div>
</div>
CSS3:
.parent{text-align:center;}
.tabItem{display:inline-block;}
Now I want to locate two of the tabs i.e. YOU and HELP at the right-side of the page, and the rest of the tabs i.e. DATABASE and TASKS at the center of the page. I wonder how I can do that.
It's preferred to have div elements follow the natural flow of the page.
Do something like this
.parent{text-align:center;}
.tabItem{display:inline-block;}
.right{float:right;}
.left{float:left;}
<div class='parent'>
<div class='tabItem left'>Content for Left</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem right'>YOU</div>
<div class='tabItem right'>HELP</div>
</div>
here is your solution!
.parent{text-align:center;}
.tabItem{display:inline-block;}
.right {
float: right;
}
<div class='parent center'>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='parent right'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>HELP</div>
</div>
</div>
Hope this helps!!
<html>
<head>
<style>
.parent{text-align:center;}
.tabItem{display:inline-block;}
#right {float: right;}
</style>
</head>
<body>
<div class='parent'>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div id="right" class='tabItem'>YOU</div>
<div id="right" class='tabItem'>HELP</div>
</div>
</body>
</html>
Or just put those two divs in a parent container and give it an id="right" to avoid repeating id !!
I think you will need to set the tabs you need to relocate to absolute position, so they will be out of the normal content flow, then you can truly center the other two tabs.
.parent {
background: pink;
text-align: center;
position: relative;
}
.tabItem {
margin: 0 5px;
display: inline-block;
background: aqua;
}
.tabItem:nth-child(1) {
position: absolute;
right: 50px; /* width of "HELP" tab */
}
.tabItem:nth-child(4) {
position: absolute;
right: 0;
}
<div class='parent'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem'>HELP</div>
</div>
CSS3 feature display:flex is an option too. Can play around with it to see if it would work.
.parent{
display:flex;
justify-content:center;
}
.item{
padding: 10px;
text-transform:uppercase;
}
.right{
margin-left:auto;
}
.left{
margin-right:auto;
}
<div class="parent">
<div class="item left">you</div>
<div class="item">database</div>
<div class="item">tasks</div>
<div class="item right">help</div>
</div>
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>
How can I produce a div that will have the following layout so I could make its contents to adjust when is resized? How should i structure this, so I could make use of media queries? Do I need to have another div that will wrap all of this?
+-----------+---------------------------------------+
+ + Title +
+Image + Description +
+ + +
+-----------+---------------------------------------+
+Another container +
+ +
+---------------------------------------------------+
Update:
Used both answers and came up with
http://jsfiddle.net/EzV4R/10/
If you want to make the most of CSS3 and do away with inline styles (bad) and floats, try:
Demo Fiddle
It has the added benefits of:
Resizing with the page
Minimizing the cell containing the image to only the image size (width)
HTML
<div class='table'>
<div class='cell'>Image</div>
<div class='cell'>Title<br />Description</div>
<div class='caption'>Another container </div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}
.cell :first-child{
width:1%;
}
.caption {
display:table-caption;
caption-side:bottom;
}
.cell, .caption {
border:1px solid black;
}
I always like to wrap structures but it is not necessary, so I would try this:
HTML
<div id="main" class="wrapper">
<div id="topleft" class="left"></div>
<div id="topright" class="right"></div>
<div style = "clear:both">
<div id="container"></div>
</div>
CSS
#main {size that you want}
#topleft {size that you want}
#topright {size that you want}
.left { float: left; }
.right { float: right; }
#container { width: 100% }
<div id="topleft" style="float:left">TOPLEFT</div>
<div id="topright" style="float:right">TOPRIGHT</div>
<div id="container" style="clear:both">CONTAINER</div>
Try this:
<div >
<div style="float:left width:50%">Image</div>
<div style="float:right width:50%">
<div >Title</div>
<div >Description </div>
</div>
</div>
<div style=" width:100%">Another container </div>
<div id="main">
<div id="logo"></div>
<div id="desc"></div>
<div id="clr"></div>
<div id="content"></div>
</div>
CSS :
#main {margin:0;padding:0;}
#logo {width:20%;float:left;}
#desc {width:80%;float:left;}
#clr{width:100%;clear:both;}
#content{width:100%;}
<section>
<div class="inlineImg">
<!-- image -->
</div>
<aside>
<h3>Title</h3>
<p>Description</p>
</aside>
</section>
<section id="other">Another Container</section>
CSS:
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
overflow: hidden;
background-color: green;
}
div.inlineImg {
background-color: blue;
width: 40%;
height: 100px;
float: left;
}
aside {
width: 60%;
height: 100px;
background-color: red;
float: left;
}
#other {
height: 100px;
}
JSFiddle
So my logic of Div ID's and Classes must be WAY off.
Heres whats going on:
As you can see the blocks which say PS don't align center with the slider (Which is inside a container.
Here is my css:
/*Front Page Buttons */
#frontpage-Button-Cont {
height: 350px;
}
.button-cont {
width: 175px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 5em;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
#Align-content {
margin: 0 auto;
}
And here is the html:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
</div>
</div>
My theory is that I'm using classes incorrectly?
Thanks.
You can Add this to your CSS
#frontpage-Button-Cont {
width:100%;
}
#Align-content {
display:table;
}
With this your margin:o auto can work
View This Demo http://jsfiddle.net/VGPeW/
You need to make sure that the containing div (in this case frontpage-Button-Cont) is the same width as your slider above it. Then add the property text-align:center to the container. That should fix your issue.