I have the following simple html code.
.body-content {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.left-menu {
background-color: red;
float: left;
width: 50px;
}
.right-container {
background-color: blue;
width: 100%;
}
.middle-view {
width: 70%;
float: left;
background-color: blueviolet;
}
.right-view {
width: 30%;
float: left;
background-color: burlywood;
}
<div class="body-content">
<div class="left-menu">
abc
</div>
<div class="right-container">
<div class="middle-view">
def
</div>
<div class="right-view">
ghi
</div>
</div>
</div>
I am getting the following result:
But I would like to 'def' and 'ghi' side by side.
I don't have much experience using HTML and CSS but I thought middle-view and right-view together will fill right-container (70% + 30%). But as I see the width given to left-menu (50px) has impact on it.
Here is the solution..
.body-content {
width: 100%;
padding-left: 15px;
padding-right: 15px;
float:left;
}
.left-menu {
background-color: red;
float: left;
width: 50px;
}
.right-container {
background-color: blue;
width:calc(100% - 50px);
float:left;
}
.middle-view {
width: 70%;
float: left;
background-color: blueviolet;
}
.right-view {
width: 30%;
float: left;
background-color: burlywood;
}
<div class="body-content">
<div class="left-menu">
abc
</div>
<div class="right-container">
<div class="middle-view">
def
</div>
<div class="right-view">
ghi
</div>
</div>
</div>
.body-content {
display: flex; /* forces children to same row */
padding-left: 15px;
padding-right: 15px;
}
.left-menu {
width: 50px;
background-color: red;
}
.right-container {
display: flex; /* forces children to same row */
flex: 1; /* consume remaining space on the row */
background-color: blue;
}
.middle-view {
width: 70%;
background-color: blueviolet;
}
.right-view {
width: 30%;
background-color: burlywood;
}
<div class="body-content">
<div class="left-menu">abc</div>
<div class="right-container">
<div class="middle-view">def</div>
<div class="right-view">ghi</div>
</div>
</div>
Related
I don't think the title is a good one but I don't know how to say it in a better way.
I have 3 divs representing an image, user info, user experience.
Due to mobile responsiveness experience must come last, but with the code below the experience div doesn't touch the top.
.one{
width: 40%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two{
width: 40%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="one">1 image</div>
<div class="two">2 info</div>
<div class="three">3 experience</div>
</div>
How it should look like:
You can wrap the left hand side in a separate div and float that left.
.left {
float: left;
width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
width: 58%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
An alternative approach using flexbox:
.left {
min-width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
flex: 1;
height: 100px;
padding: 5px;
background-color: #f00;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
display: flex;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
Your 1st div(image) has a margin to the right so 3rd div(experience) won't fit in. So at first you have to wrap the 1st two div's into a container like the example below
<div class="four">
<div class = "container">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
After that you will need to inline the container and set the width of container to 40% and first two div's to 100% like the CSS below.
.one{
width: 100%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.container {
display:inline-block;
width:40%;
}
.two{
width: 100%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
vertical-align: text-top;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
Here's it on Codepen and Jsfiddle
Wrap div's one and two in a div that sets the width and floats left, then float div three to the right.
Make div class one and two to 100% width so they fill the left div completely, and set the left div to the width you wanted.
HTML:
<div class="four">
<div class="left">
<div class="one">
1 image
</div>
<div class="two">
2 info
</div>
</div>
<div class="three">
3 experience
</div>
</div>
CSS:
.one{
height: 50px;
padding: 5px;
background-color: #0f0;
display: block;
}
.two{
height: 70px;
padding: 5px;
background-color: #0ff;
display: block;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
display: inline-block;
}
.left {
float: left;
display: block;
width: 42%;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
display: block;
float: left;
}
I have a h1 and a p inside a div with display:flex.
The two are positioned side by side, but they have to be under each other.
It is about the elements with class jktitre and class jktxt inside (div)jkpage.
jkpage div is flex with jksidebar (side by side)
I did not expect that the text elements somehow inherit the flex property. Or something like that.
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>
The CSS:
body{
background-color: lightgrey;
}
.jktitre{
margin-left:5%;
float:left;
display: block;
}
.jktxt{
margin-left:5%;
padding:10px;
float:left;
}
.jkrow{
width:100%;
display:flex;
}
.jkheader{
margin-top:20px;
height:150px;
width:100%;
background-color: #2d18a4;
}
.jknavbar{
height:45px;
width:100%;
background-color: black;
}
.jkpage{
height:400px;
width:75%;
background-color: #e7e7e7;
display:flex;
}
.jksidebar{
height:400px;
width:25%;
background-color: darkslategrey;
display:flex;
}
.jkfooter{
height:150px;
width:100%;
background-color: blue;
margin-bottom: 20px;
}
Add flex-direction: column to the parent element to display them under each other. The default value for it is row which shows the child elements from left to right(Side by side)
body {
background-color: lightgrey;
}
.jktitre {
margin-left: 5%;
float: left;
display: block;
}
.jktxt {
margin-left: 5%;
padding: 10px;
float: left;
}
.jkrow {
width: 100%;
display: flex;
}
.jkheader {
margin-top: 20px;
height: 150px;
width: 100%;
background-color: #2d18a4;
}
.jknavbar {
height: 45px;
width: 100%;
background-color: black;
}
.jkpage {
height: 400px;
width: 75%;
background-color: #e7e7e7;
display: flex;
flex-direction: column;
}
.jksidebar {
height: 400px;
width: 25%;
background-color: darkslategrey;
display: flex;
}
.jkfooter {
height: 150px;
width: 100%;
background-color: blue;
margin-bottom: 20px;
}
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>
I'm working on a responsive template but I have a problem with the widths of my divs and they are all the same size, but they should not be, look at the code snippet. I tried some things but they all don't work :/
Html:
<div class="content">
<div class="col 4">
<div class="top">
<h4>Top</h4>
</div>
<div class="con">
<p class="inner">Content</p>
</div>
</div>
<div class="col 3">
<div class="top">
<h4>Top</h4>
</div>
<div class="con">
<p class="inner">Content</p>
</div>
</div>
<div class="col 3">
<div class="top">
<h4>Top</h4>
</div>
<div class="con">
<p class="inner">Content</p>
</div>
</div>
<div class="col 3">
<div class="top">
<h4>Top</h4>
</div>
<div class="con">
<p class="inner">Content</p>
</div>
</div>
</div>
CSS:
.content {
width: auto;
height: auto;
padding: 10px;
}
.col {
box-shadow: 0 0 3px #bdc3c7;
margin: 5px;
}
.col .4 {
width: 100%;
float: left;
}
.col .3 {
width: 33.33333%;
float: left;
}
.col .2 {
width: 50%;
float: left;
}
.col .1 {
width: 25%;
float: left;
}
.col .top {
height: 40px;
line-height: 40px;
width: 100%;
background: #3498db;
}
.col .top h4 {
padding: 0 10px;
color: #fff;
}
.col .con {
width: 100%;
}
.inner {
padding: 10px;
}
You should change your class names to something like "col-1", "col-2" ... Check this post
Also, your selectors are wrong. With this:
.col .col-1 {}
You are trying to access all the element with "col-1" class inside elements with class "col".
You should be doing:
.col.col-1 {}
To get the elements containing both classes.
This:
.col .4 {
width: 100%;
float: left;
}
.col .3 {
width: 33.33333%;
float: left;
}
.col .2 {
width: 50%;
float: left;
}
.col .1 {
width: 25%;
float: left;
}
Should be this:
.col-4 {
width: 100%;
float: left;
}
.col-3 {
width: 33.33333%;
float: left;
}
.col-2 {
width: 50%;
float: left;
}
.col-1 {
width: 25%;
float: left;
}
or this, which means all col classes that also has another numeric class:
.col.col-4 {
width: 100%;
float: left;
}
.col.col-3 {
width: 33.33333%;
float: left;
}
.col.col-2 {
width: 50%;
float: left;
}
.col.col-1 {
width: 25%;
float: left;
}
Since they're not nested inside the col class. As having classes that starts with a number isn't allowed.
I'm trying to put 3 divs(with different widths respectively : 10%,70% & 20%) in the same row but the middle one always go full width of the page.
Here is my code:
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
By default div is a block level element that's why they aren't in the same row.
You have a few options to fix this:
option with CSS flexbox:
.row {
display: flex;
width: 100%
}
.row>div {
/*demo purposes */
height: 30px;
}
#left-bar {
flex: 0 10%;
background-color: #F00;
}
#middle-bar {
flex: 1;
background-color: #60F;
}
#right-bar {
flex: 0 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
(old options)
option with display:inline-block
.row {
/*fix inline-block gap*/
font-size: 0;
}
.row>div {
display: inline-block;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
option with display:table-[cell]
.row {
display: table;
width: 100%
}
.row>div {
display: table-cell;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
The table-cell option actually doesn't work in some internet explorer versions. But the same result can be achieved with the property float:
#left-bar{
width:10%;
background-color: #FF0000;
}
#middle-bar{
width:70%;
background-color: #6600FF;
}
#right-bar{
width:20%;
background-color: #99FF99;
}
.row > div {float:left;}
<div class="row">
<div id="left-bar">a</div>
<div id="middle-bar">b</div>
<div id="right-bar">c</div>
</div>
#left-bar{
width:10%;
background-color: #FF0000;
float:left;
}
#middle-bar{
width:70%;
background-color: #6600FF;
float:left;
}
#right-bar{
width:20%;
background-color: #99FF99;
float:left;
}
If that doesn't work, please provide more html and css because the problem will be somewhere else. Also, verify that you have heights set for your divs.
How can I make this html structure
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
be displayed like this while div#1 and #2 have css float:left
( id names are integers only for demonstration purposes )
First of all, you will need to change the id's of your <div>'s to start with an alphabet rather than just one single digit since you won't be able to style your <div>'s using CSS then. Moreover, to achieve the sort of a layout which you're trying to create, you will need to wrap your two floated <div>'s inside a <div> and set the display property of that <div> to inline-block.
Here's a demo:
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
Edit: If you want to align the three boxes to the right side of the page then you will need to wrap your HTML inside another <div> and set the text-align property of that <div> to right, like this:
#wrapper {
text-align: right;
}
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="wrapper">
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
</div>
If you want to keep the given HTML structure, here's two different methods. One is working around the floats, the other is simply using absolute or relative positioning to force the third div into place.
HTML
<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>
CSS using inline-block (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
display: inline-block;
}
CSS using relative positioning (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
clear: both;
position: relative;
left: 220px;
top: -430px;
}
Fixed here - http://jsfiddle.net/3147og96/1/
html:
<div class="parent">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
css:
.parent {
height: auto;
width: 120px;
padding: 5px;
padding-left: 110px;
border: 1px solid red;
}
.parent div {
height: 50px;
width: 50px;
border: 1px solid red;
display: inline-block;
}
#one, #two {
float: left;
}