I'm facing a problem:
I want to put 3 divs horizontally with itself, but i'm not getting to do it right.
Could someone help?
I've already searched a lot about properties in css and html, but i couldn't apply to what i'm doing.
With the normal zoom:
http://i.imgur.com/ylk5pm2.png
What i want:
http://i.imgur.com/47kzlpv.png
Codes:
.container {
width:100%;
border-color: #FF0000;
border-style: solid;
border-width:medium;
text-align:center;
margin-bottom: 1%;
}
.menu_box_filtro{
display:inline;
}
.conteudo_box_filtro{
display:inline-block;
}
<div class="border_preta">
<div class="menu_box_filtro">
<div class="grid_10 border_brown conteudo_box_filtro">
</div>
</div>
<div class="menu_box_filtro">
<div class="grid_63 border_brown conteudo_box_filtro">
menu centro
</div>
</div>
<div class="menu_box_filtro">
<div class="grid_10 border_brown conteudo_box_filtro">
menu direita
</div>
</div>
</div>
You can check with the below link.
Fiddle
<div class="main">
<div class="inner">
<div class="left-col">Left</div>
<div class="center-col">Center</div>
<div class="right-col">Right</div>
</div>
Check this
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
background-color:#F0A202;
}
.group{
content:"";
display:table;
clear:both;
}
div:nth-of-type(1) {
width: 36%;
float: left;
}
div:nth-of-type(2) {
width: 30%;
float: left;
margin-left: 4%;
}
div:nth-of-type(3) {
width: 26%;
float: right;
}
<div class="container group">
<div>
<p>First<p>
</div>
<div>
<p>Second<p>
</div>
<div>
<p>Third<p>
</div>
</div>
Here is an example using FlexBox.
.container {
width: 100%;
border-color: #FF0000;
border-style: solid;
border-width: medium;
display: flex;
align-items: center;
}
.container>* {
flex-grow: 1;
}
.menu_box.left {
background-color: rgba(255, 0, 0, 0.5);
height: 100px;
}
.menu_box.center {
background-color: rgba(0, 255, 0, 0.5);
height: 200px;
}
.menu_box.right {
background-color: rgba(0, 0, 255, 0.5);
height: 100px;
}
<div class="container">
<div class="menu_box left">Left</div>
<div class="menu_box center">Center</div>
<div class="menu_box right">Right</div>
</div>
Related
I have two queries in a single program.
query1:
I am trying to align two sub super sub divisions horizontally inside a sub div of a container div. Below is my code, could you please help me out with this. I have attached the desirable output.
query2:
and from the code you can see inside a circle there is a paragraph day, I wanted it to start from the center of the circle such as if the number of days is 1 it should be shown from the center and when there are 3 digit days it should be adjusted in the center. Hope you understand my queries.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
}
.container-meta {
position: relative;
}
.container-meta .left {
float: left;
}
.container-meta .right {
float: right;
}
.right p,
.left p {
padding: 0;
margin: 0;
}
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
current output:
expected output:
You can do this by giving display:flex; to the left class and by giving some margin to one of divs.
.circle {
height: max-content;
width: max-content;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
}
.container-meta {
position: relative;
}
.container-meta .left {
float: left;
display: flex;
}
.container-meta .right {
float: right;
}
.right p,
.left p {
padding: 0;
margin: 0;
width:max-content;
}
.date {
margin-left: 5px;
}
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
Solution1.
I add display: flex at the .leftand margin-right: 10px at .circle.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
margin-right: 10px;
}
.container-meta {
position: relative;
}
.container-meta .left {
display: flex;
float: left;
}
.container-meta .right {
float: right;
}
.right p,
.left p {
padding: 0;
margin: 0;
}
<body>
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
</body>
Solution2.
Using flex instead of float.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
margin-right: 10px;
}
.container-meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.container-meta .left {
display: flex;
align-items: center;
flex-grow: 1;
}
.right p,
.left p {
padding: 0;
margin: 0;
}
<body>
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
</body>
I'm stuck with wrong output.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.largebox { display: block; margin: 10px; border: 3px solid #73AD21; }
.box1 { display:inline-block; width:20%; height:200px; border:2px solid red; }
.box2 { display:inline-block; width:78%; height:100px; border:2px solid red; }
.col1 { display:inline-block; border:2px solid red; }
</style>
</head>
<body>
<div class="largebox"> <div class="box1">
<div class="leftbox"></div>
</div>
<div class="box2">
<div class="col1">float</div>
</div>
</body>
</html>
You can create this layout with Flexbox.
.largebox, .bottom, .box1 {
display: flex;
flex: 1;
}
.box2 {
flex: 3;
}
.box {
border: 1px solid black;
margin: 10px;
padding: 25px;
flex: 1;
}
<div class="largebox">
<div class="box1">
<div class="box">Div</div>
</div>
<div class="box2">
<div class="box">Div</div>
<div class="bottom">
<div class="box">Div</div>
<div class="box">Div</div>
<div class="box">Div</div>
</div>
</div>
</div>
This is how you can create same layout with inline-block, note that height on container is fixed.
* {
box-sizing: border-box;
}
.largebox {
height: 300px;
}
.bottom, .box1, .box2 {
display: inline-block;
vertical-align: top;
}
.box1 {
width: calc(30% - 10px);
height: 100%;
}
.box2 {
width: calc(70% - 10px);
height: 100%;
margin-left: 5px;
}
.box {
border: 1px solid black;
margin: 10px;
padding: 25px;
display: inline-block;
width: 100%;
height: 100%;
}
.box2 > .box {
height: 50%;
margin-bottom: 0;
width: calc(100% - 10px);
}
.bottom {
width: 100%;
height: 50%;
padding-bottom: 10px;
}
.bottom > .box {
width: calc(33.334% - 10px);
margin-right: 0;
}
<div class="largebox">
<div class="box1">
<div class="box">Div</div>
</div>
<div class="box2">
<div class="box">Div</div>
<div class="bottom">
<div class="box">Div</div><div class="box">Div</div><div class="box">Div</div>
</div>
</div>
</div>
I'd consider experiment with CSS property flex: https://developer.mozilla.org/en/docs/Web/CSS/flex
or use some grid templating system, e.g. Bootstrap https://getbootstrap.com/examples/grid/
I've re-structured this question as my previous one was too broad. Hopefully, this is refined enough?
I need to reproduce the same as in the image... Ive spent a day trying to produce it but just cant get it to work.
The red box is a div which can be of varying height or width. The checkbox needs to be centered vertically. Both green divs will be parent containers for other inline elements. The first green box will have a set width and the second will take up the remaining space.
If I have asked this incorrectly then please let me know...how best to ask it...?
Here is my markup so far
#profiles-container {
width: 100%;
height: 100%;
background-color: #dedede;
padding: 20px;
}
.profile-container {
float: left;
width: 50%;
vertical-align: top;
font-size: 0;
box-sizing: border-box;
position: relative;
}
.profile-checkbox {
position: absolute;
width: 40px;
left: 0;
text-align: center;
line-height: 100px;
}
.profile-container-inner {
height: 100px;
background-color: #fff;
border-left: solid 1px #bbb;
border-right: solid 1px #bbb;
border-radius: 5px;
font-size: 13px;
margin-left: 40px;
}
.container1 {
float: left;
width: 200px;
background-color: #ccc;
height: 100%;
}
.container2 {
float: left;
background-color: #ccc;
height: 100%;
}
.profile-bar-color {
background-color: #00bfff;
width: 10px;
float: left;
height: 100%;
}
<ul id="profiles-container">
<li class="profile-container">
<div class="profile-checkbox"><input type="checkbox"/></div>
<div class="profile-container-inner">
<div class="profile-bar-color"> </div>
<div class="container1">
<h3>Annie Jane</h3>
</div>
<div class="container2">Some content</div>
</div>
</li>
<li class="profile-container">
<div class="profile-checkbox"><input type="checkbox"/></div>
<div class="profile-container-inner">
<div class="profile-bar-color"></div>
<div class="container1">
<h3>Joe Bloggs</h3>
</div>
<div class="container2">Some content</div>
</div>
</li>
</ul>
.module {
height: 100px;
width: 100%;
}
.checkbox {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.content {
position: relative;
height: 100%;
margin-left: 25px;
}
.fixed-width {
float:left;
height: 100%;
width:180px;
}
.dynamic-width {
height: 100%;
width: 100%;
}
<div class="module" style="background-color: green">
<input class="checkbox" type="checkbox">
<div class="content" style="background-color: orange">
<div class="fixed-width" style="background-color: yellow">
<p>Test</p>
</div>
<div class="dynamic-width" style="background-color: blue">
<p>Test</p>
</div>
</div>
</div>
Use html tables.
CodePen
<table id="container">
<tr>
<td class="left">
<input type="checkbox">
</td>
<td class="center">Center</td>
<td class="right">Right</td>
</tr>
</table>
#container{
width:100%;
height:200px;
background:red;
padding:10px;
}
.left{
background:blue;
width:50px;
vertical-align: middle;
padding:10px;
}
.center{
background:green;
}
.right{
background:green;
width:100%;
}
Here is a code which matches what you need and also centers the text vertically :
.container {
height: 200px;
}
.right {
width:auto;
height:100%;
background:red;
overflow:hidden;
}
.left {
height:100%;
width:100px;
background:blue;
float:left;
}
.left2 {
height:100%;
width:300px;
background:green;
float:left;
}
.vert-center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.center {
text-align: center;
}
<div class="container">
<div class="left">
<div class="vert-center center">
<input type="checkbox" name="name" />
</div>
</div>
<div class="left2">
<div class="vert-center">
Here some text
</div>
</div>
<div class="right">
<div class="vert-center">
Here some more text
</div>
</div>
</div>
Code adapted from the well explained answer of Xanthir, by adding another div and vertical aligns :
Expand a div to take the remaining width
Flexbox can do the basic layout.
.container {
height: 100px; /* or any height */
display: flex;
border: 1px solid red;
padding: 1em;
margin: 1em;
}
.container input {
align-self: center; /* vertically centered */
margin-right: 1em;
}
.left,
.right {
border: 1px solid green;
}
.left {
width: 150px; /* fixed width */
background: pink;
}
.right {
flex: 1; /* remaining width */
background: #c0ffee;
}
<div class="container">
<input type="checkbox" />
<div class="left"></div>
<div class="right"></div>
</div>
I've got this short code:
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2, #div10 {
width: 21px;
height: 100px;
}
#div3, #div9 {
width: 60px;
height: 60px;
}
#div4, #div8 {
width: 70px;
height: 70px;
}
#div5, #div7 {
width: 77px;
height: 77px;
}
#div6 {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
<div id="div7">Content7</div>
<div id="div8">Content8</div>
<div id="div9">Content9</div>
<div id="div10">Content10</div>
</div>
I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center.
I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.
Do you have any idea?
Just add vertical-align:middle; on the rule above:
CSS
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
vertical-align: middle;
}
DEMO HERE
Hey if you are having some confusion or problem of using vertical-align:middle you can go through below example
I have added a new div inside of div with id div2 to div10 and updated css
#div1 > div {
display: inline-block;
align: center;
margin: 0% 0, 5%;
position: relative;
top: 50%;
}
#div1 > div[id] > div {
transform: translateY(-50%);
color: white;
border: 1px dotted yellow;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2 > div, #div10 > div {
width: 21px;
height: 100px;
}
#div3 > div, #div9 > div {
width: 60px;
height: 60px;
}
#div4 > div, #div8 > div {
width: 70px;
height: 70px;
}
#div5 > div, #div7 > div {
width: 77px;
height: 77px;
}
#div6 > div {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">
<div>
Content2
</div>
</div>
<div id="div3">
<div>
Content3
</div>
</div>
<div id="div4">
<div>
Content4
</div>
</div>
<div id="div5">
<div>
Content5
</div>
</div>
<div id="div6">
<div>
Content6
</div>
</div>
<div id="div7">
<div>
Content7
</div>
</div>
<div id="div8">
<div>
Content8
</div>
</div>
<div id="div9">
<div>
Content9
</div>
</div>
<div id="div10">
<div>
Content10
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/9tdzqvot/
I want the left column (#left) to have overflow-y: scroll and overflow-x: visible. However, the overflow-x ends up being scroll when I test it despite the code saying different. What am I doing wrong? Thanks.
$(document).ready(function(){
$("#title").click(function(){
$("#title").hide();
});
$("#one").click(function(){
$("#one").addClass("open");
$("#oneBottom").addClass("clicked");
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#two").click(function(){
$("#two").addClass("open");
$("#twoBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#three").click(function(){
$("#three").addClass("open");
$("#threeBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked");
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#four").click(function(){
$("#four").addClass("open");
$("#fourBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked");
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#five").click(function(){
$("#five").addClass("open");
$("#fiveBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked");
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
});
});
.open{
margin-left: 124% !important;
margin-top: 18% !important;
width: 187% !important;
height: 80% !important;
font-size: 250% !important;
}
.clicked{
border: red solid 3px !important;
}
html{
width: 100%;
height: 100%;
margin: 0px;
border: 0px;
}
body{
width: 100%;
height: 100%;
margin: 0px;
border: 0px;
}
#title{
height: 10%;
width: 100%;
margin-bottom: 1%;
background-color: rgba(0, 0, 255, 0.5);
}
h1{
text-align: center;
}
#left{
width: 30%;
height: 100%;
position: absolute;
overflow-y: scroll;
overflow-x: visible;
}
#right{
width: 70%;
height: 100%;
position: absolute;
margin-left: 30%;
border-left: solid 2px black;
}
.card{
height: 20%;
width: 80%;
margin-left: 10%;
position: absolute;
background-color: blue;
border-radius: 5px;
border: grey solid 2px;
}
.first{
margin-top: 6.5%;
}
#one{
background-color: green;
}
.second{
margin-top: 50%;
}
#two{
background-color: green;
}
.third{
margin-top: 93%;
}
#three{
background-color: green;
}
.fourth{
margin-top: 136%;
}
#four{
background-color: green;
}
.fith{
margin-top: 179%;
}
#five{
background-color: green;
}
#main{
width: 80%;
height: 80%;
margin-left: 10%;
margin-top: 7.5%;
background-color: white;
border-radius: 5px;
border: grey solid 3px;
opacity: 0.5;
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="title">
<h1>Blah Blah Blah</h1>
</div>
<div id="left">
<div class="card first" id="oneBottom">
<h1>Hello</h1>
<p>Heljaldf</p>
</div>
<div class="card first" id="one">
<h1>Hello</h1>
<p>Heljaldf</p>
</div>
<div class="card second" id="twoBottom">
<h1>Sup</h1>
</div>
<div class="card second" id="two">
<h1>Sup</h1>
</div>
<div class="card third" id="threeBottom">
</div>
<div class="card third" id="three">
</div>
<div class="card fourth" id="fourBottom">
</div>
<div class="card fourth" id="four">
</div>
<div class="card fith" id="fiveBottom">
</div>
<div class="card fith" id="five">
</div>
</div>
<div id="right">
<div id="main">
</div>
</div>
</body>
</html>
The issue you're having with #left is that you're mixing visible with scroll. Because you're mixing values it's going to treat visible as auto instead.
Check out the W3 documentation on this here: http://www.w3.org/TR/css3-box/#collapse-scroll