CSS3 Divs side by side, arrangement - javascript

I have problem with divs arrangement.
Here is my code:
#container{
}
#block1{
vertical-align: top;
display: inline-block;
width:49%;
height:50px;
background-color:red;
}
#block2{
vertical-align: top;
display: inline-block;
width:49%;
height:100px;
background-color:blue;
}
<div id="container">
<div id="block1"></div>
<div id="block2"></div>
<div id="block1"></div>
<div id="block1"></div>
</div>
And issue is arrangement, it looks like this:
But i need to look like this. Arrange divs up without white spaces.
Any ideas here? Thanks :).
Here is JSFiddle, so you can play with it: http://jsfiddle.net/cn2r3tga/


css
#container{
}
#block1{
background-color: #FF0000;
display: inline-block;
float: left;
height: 50px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
#block2{
background-color: #0000FF;
display: inline-block;
float: left;
height: 100px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
.alignment{
float: left;
width: 50%;
}
HTML
<div id="container">
<div class="alignment">
<div id="block1"></div>
<div id="block1"></div>
</div>
<div class="alignment">
<div id="block2"></div>
<div id="block1"></div>
</div>
</div>
Note: ID of any HTML control should be unique


Reorder your div's like this (also changed the id to class):
<div id="container">
<div class="block2"></div>
<div class="block1"></div>
<div class="block1"></div>
<div class="block1"></div>
</div>
Then use float instead of inline-block:
.block1{
vertical-align: top;
float: right;
width:49%;
height:50px;
background-color: red;
}
.block2{
float: right;
width:49%;
height:100px;
background-color: blue;
}
Updated Fiddle


You can group them into two divs and then get the desired result. As shown below:
#container{
}
.left{
float:left;
width:49%;
margin-right:2%
}
.right{
float:right;
width:49%;
}
.block1{
vertical-align: top;
display: inline-block;
width:100%;
height:50px;
margin-bottom: 10px;
background-color:red;
}
.block2{
vertical-align: top;
display: inline-block;
width:100%;
height:100px;
background-color:blue;
}
<div id="container">
<div class="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
<div class="block1"></div>
</div>
</div>


https://jsfiddle.net/cn2r3tga/3/
Updated fiddle.
"float:right"
should be used for those going to the right.


first you use id which should be used only once so use classes instead which you can re-use as many times as you want.
Secondly I would add another 2 div within your .container to make the result you want and add the css to keep the shape your want:
<div class="container">
<div calss="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
</div>
</div>

Related

How to make 3 column two side by side one middle my divs takes everything to left

I am trying to make simple css layout. I want 3 box
{Left} {center} {right}
So I write this code
#myleft {
position: relative;
float: left;
width: 20%;
background-color: #CC6600;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
* html #mycenter {
height: 1%
}
#myright {
position: relative;
float: right;
width: 20%;
background-color: #FF6633;
}
<div id='left'> Left </div>
<div id='mycenter'> Center </div>
<div id='right'> right </div>
but instead of
{left} {center} {right}
{left}
{center}
{right}
I don't know why but it goes like this even the float is left and right

You didn't name your div id's correctly. they should be myleft and myright
body {
width: 100%;
}
#myleft {
position:relative;
float:left;
width:20%;
background-color:#CC6600;
}
#mycenter {
width:60%;
float: left;
background-color:#f2f4f4;
}
#mycenter {
height:1%
}
#myright {
float:left;
width:20%;
background-color:#FF6633;
}
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>

Wrap your divs into a main div and try to use Flexbox
Stack Snippet
.d-flex {
display: flex;
flex-wrap: wrap;
}
#myleft {
position: relative;
width: 20%;
background-color: cyan;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
#myright {
position: relative;
width: 20%;
background-color: cyan;
}
<div class="d-flex">
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>
</div>

And, of course, there is grid. First wrap the "gridded" elements
<div id='wrapper'>
<div id='left'> Left </div>
<div id='center'> Center </div>
<div id='right'> right </div>
</div>
#wrapper {
display: grid;
grid-template-columns: 2fr 6fr 2fr;
}
Then, optionally, if you want the content of each sub-div to be centered:
#left, #right, #center {
margin-left:auto;
margin-right:auto;
}

.container {
display: flex;
}
.box1 {
flex: 1 ;
text-align: center;
background-color: gray;
}
.box2 {
flex: 2;
text-align: center
}
.box3 {
flex: 1;
text-align: center;
background-color: gray;
}
<div class="container">
<div class="box1">
<p> text</p>
</div>
<div class="box2">
<p> text</p>
</div>
<div class="box3">
<p> text</p>
</div>
</div>

How we fix vertical-align: middle; css property without giving height?

I have a div where i want text to verticle align without height because i have not know how much text enter by user... ##
.main-body {
display: table;
height: 100px;
border:1px solid #000;
}
.inner-body {
display: table-cell;
}
.inner-body p {
vertical-align: middle;
}
<div class="main-body">
<div class="inner-body">
<p>Hello World!</p>
</div>
</div>

Use vertical-align: middle; on .inner-body
.main-body {
display: table;
border:1px dotted
}
.inner-body {
display: table-cell;
vertical-align: middle;
}
<div class="main-body">
<div class="inner-body">
<p>Hello World!</p>
</div>
</div>

Add vertical-align:middle for inner-body class
.inner-body {display:table-cell;vertical-align: middle;}
.main-body {display:table; height:100px;}
.inner-body {display:table-cell;vertical-align: middle;}
.inner-body p {}
<div class="main-body">
<div class="inner-body">
<p>Hello World!</p>
</div>
</div>

Some SO users already replied, but if you are ok with flex then :
.inner-body { /*or .main-body*/
margin: 0 auto;
display: flex;
justify-content: center; /* or flex-start for left align*/
align-items: center;
background-color: red;
width: 300px;
height: 70px;
}
HTML
<div class="main-body">
<div class="inner-body">
<p>Hello World!</p>
</div>
</div>
background-color height width are only for demonstration.

responsive grid using display table and float

DEMO : http://jsfiddle.net/5adjhd1x/2/
How can I make below dialpad responsive? I tried to use width 33% and some JS in demo 1 : http://jsfiddle.net/5adjhd1x/, but I couldn't have margin for them.
.key {
width:40px;
height:40px;
background:red;
float:left;
border-radius:50%;
cursor:pointer;
text-align: center;
display:table;
margin:1%;
}
.key > span {
display:table-cell;
vertical-align:middle;
}
.clearFloat {
clear:both;
}
<div class="keyWrap">
<div class="key"><span>1</span>
</div>
<div class="key"><span>2</span>
</div>
<div class="key"><span>3</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>4</span>
</div>
<div class="key"><span>5</span>
</div>
<div class="key"><span>6</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>7</span>
</div>
<div class="key"><span>8</span>
</div>
<div class="key"><span>9</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>0</span>
</div>
<div class="key dlt"><span>Del</span>
</div>
</div>
<br> <br>
How can I make them to have margin in percentage and responsive?

Answer at here dude:
http://jsfiddle.net/5adjhd1x/6/
Give me a like !
.key {overflow: hidden; display: block; background: grey; padding: 0;}
.key li {width: 32%; margin-right: 2%; margin-bottom: 10px; float: left; display: inline-block; background: red;}
.key li:nth-child(3n) {margin-right: 0%;}

Click button expands the div horizontally by closing other two divs

Guys I am new to jQuery...please help me to learn this. I want to expand the div(#center) taking width:100% on click that in turn closes the other 2 divs (#left and #right) in my case.
Please someone help me to solve this. And the most imp thing is that the transition should be swift nd not at once. Reply is appreciated. And its not lyk i dint try it first. I tried using click function to make it happen..bt dint work as desired
body {
width: 100%;
height: auto;
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="abc.css">
<script href="abc.js"></script>
</head>
<body>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
</body>

You can use this example for "tab2"
$("#tab2").click(function () {
$("#center").css("width", "100%");
$("#left").fadeOut("slow");
$("#right").fadeOut("slow");
});
check my fiddle: http://jsfiddle.net/u87z1m3n/1/
And put id's to the li's in order to be able to select them:
<li id="tab1">Tab 1
</li>
<li id="tab2">Tab 2
</li>
<li id="tab3">Tab 3
</li>
The example is very coarse as the code needs a lot more refining...
But I think that it gives an answer to your question...

Study the example below. Let me know if you have any questions.
$("#head li").click(function () {
$("#center, #left, #right").eq($(this).index()).css("width", "100%");
$("#center, #left, #right").not($(this)).hide();
});
body {
width: 100%;
height: auto;
}
.current {
width: 100%
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: red;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>

Here's a CodePen demo showing the final result of everything below. Please read it carefully so you can learn the process and understand everything that's happening.
First of all, your HTML needed a lot of cleanup. You called head as an ID, but used it multiple times throughout your code. If you're going to use a selector more than once, it should be a class instead. I changed it in the HTML and the CSS.
HTML
<div id="main">
<div id="taskDetails">
<div class="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form"></div>
</div>
</div>
<div id="description">
<div class="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte"></div>
<div class="text"></div>
</div>
</div>
<div id="details">
<div id="left">
<div class="head">
<div class="heading">Projects</div>
</div>
<div class="data"></div>
</div>
<div id="center">
<div class="head">
<div class="heading">Details</div>
</div>
<div class="data"></div>
</div>
<div id="right">
<div class="head">
<div class="heading">Tab 3</div>
</div>
<div class="data"></div>
</div>
</div>
</div>
Next, in your CSS, you hadn't set the widths of your containers correctly, so adding something like width:100% wasn't doing anything because there was no max width to fill. I added that to your styles. Remember, I also updated the markup from changing your head id to a class.
Additionally, I removed the floats from you left,right, and center divs because that removes the blocks from the flow of the document, which can lead to funny behavior. Instead, I changed them to display:inline-block and set their widths relative to the container.
Finally, I added a .wide class at the end which will set the width of the center div.
CSS
body {
margin:0;
padding:0;
width: 100%;
height: auto;
}
#main {
width:100%;
}
#taskDetails {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
width:100%;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
display:inline-block;
margin:0;
padding:0;
width:20%;
margin: 0 auto;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
#center {
display:inline-block;
margin:0;
padding:0;
width:50%;
height: 200px;
border: 1px solid #a1a1a1;
background: red;
}
#right {
display:inline-block;
margin:0;
padding:0;
width:20%;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
.head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
.wide {
width:100% !important;
transition:.5s;
}
Now, this can be done with jQuery, so make sure you add the script in the head of your HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
The jQuery script is pretty simple, and does three things:
1. When you click on any of the tab buttons, it will hide the #left and #right divs.
2. The #center div expands to 100% of the container.
3. When you click on the tab again, it will shrink the #center div and bring the other two back.
jQuery
$(".head ul li").click(function() {
$("#left, #right").animate({width:"toggle"});
$("#center").toggleClass('wide');
})
I used toggle in both of the calls because it gives a fairly nice animation without making you code in specifics. It also handles adding or removing a class, so your script can stay simple if all you want to do is add or remove that class with each click.
If you want something more complex, you'll definitely want to look at JavaScript instead of jQuery as #Katana314 mentioned above. They're for two different things, so make sure you understand the difference between the two.

HTML: Why is Div is not in Top Corner?

I got 2 div in-line to each other.
If the second div is 2 lines long, the first div is no longer in the top corner...
Why is that?
EDIT: Why does div1 automatically vertical-align when the second div has 1 line but doesn't when it has 2 or more lines?
Check http://jsfiddle.net/d5Z6V/354/
<div id="wrapper">
<div id="div1">Not in top corner</div>
<div id="div2">
<div>asd</div>
<div>asd</div>
</div>
</div>
<br>
<div id="wrapper">
<div id="div1">In top corner</div>
<div id="div2">
<div>asd</div>
</div>
</div>
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:120px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:160px;
height:160px;
border: 1px solid green;
}

You need to vertically align it to top like this:
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:120px;
height:120px;
border: 1px solid red;
vertical-align: top;
}
#div2 {
display: inline-block;
width:160px;
height:160px;
border: 1px solid green;
vertical-align: top;
}
<div id="wrapper">
<div id="div1">Not in top corner</div>
<div id="div2">
<div>asd</div>
<div>asd</div>
</div>
</div>
<br>
<div id="wrapper">
<div id="div1">In top corner</div>
<div id="div2">
<div>asd</div>
</div>
</div>

add vertical-align:top; to #div1

Categories

Resources