I have 3 divs, main, right and left. The main div contains the right and left div and I want to align the right and left div side by side. I have read few posts here but have not been able to get the desired results.
https://jsbin.com/lagikaxiwe/edit?html,css,output
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
}
div#right-content {
position: relative;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
position: absolute;
width: calc(100% - 35%);
height: 100%;
margin: 0px 0px 0px 666px;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
The simplest method nowadays to use display: flex on the container. Have a look at the settings in my snippet - I erased a lot of the other settings, which are not necessary...
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
div#main-content {
background-color: bisque;
height: 100%;
display: flex;
}
div#right-content {
width: 35%;
height: 100%;
background-color: red;
}
div#left-content {
width: 65%;
height: 100%;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
width: 100%;
}
div#right-content {
float: left;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
width: calc(100% - 35%);
height: 100%;
background-color: #00aeef;
float: left;
}
I would personally use display:inline-block to align the left and right divs
side by side and add the necessary widths to add up to 100% of the parent width. Be sure to use font-size:0 on the parent to eliminate the white space between the left and right divs so they sit next to each other correctly.
Be sure to assign font-sizes to your left and right content so your content actually shows up!
This method is largely backwards compatible with all browsers.
div#main-content{
font-size:0;
}
div#left-content{
display:inline-block;
vertical-align:top;
width:65%;
}
div#right-content{
display:inline-block;
vertical-align:top;
width:35%;
}
Related
Could like to make a screen layout that's broadly like this:
The entire browser window should be filled with the only two elements of "known" height being the white blocks top, left and bottom, left (for two labels, hence known will be relative to a font). Everything else should scale with the browser window, i.e. the left bar being 15% wide, the right 85%, etc.
As a C++ developer my instinct here was to handle events in Javascript and code against the DOM but I've got a feeling this is relatively trivial with CSS.
Can anyone help me please?
I tried to reproduce quickly :
* {
box-sizing: border-box;
}
html,
body,
.wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.left,
.right {
float: left;
}
.left {
position: relative;
width: 15%;
height: 100%;
}
.left .label-top,
.left .label-bottom {
position: absolute;
width: 100%;
background-color: #fff;
}
.left .label-top {
top: 0;
left: 0;
}
.left .label-bottom {
bottom: 0;
left: 0;
}
.left .content,
.left .top,
.left .bottom {
border: 1px solid white;
}
.left .top,
.left .bottom {
height: 5%;
background-color: gray;
}
.left .content {
height: 30%;
background-color: #a09898;
}
.right {
width: 85%;
height: 100%;
background-color: gray;
}
.right::after {
content: '';
display: table;
clear: both;
}
<div class="wrapper">
<div class="left">
<div class="label-top">Label</div>
<div class="top"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="bottom"></div>
<div class="label-bottom">Label</div>
</div>
<div class="right"></div>
</div>
So, a little base that you can start to work on top of.
As fixed height, i used vh and it really depends in what browsers you want to support: vh support
Else you can use height: 100% of the parent or body.
.left-bar {
width: 15%;
background-color: red;
float: left;
height: 100vh;
border-right: 5px solid black;
}
.right-window {
width: 85%;
float: left;
height: 100vh;
background-color: pink;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="left-bar">
</div>
<div class="right-window">
</div>
I think this is what you want. Not sure though.
This achieves the full browser filling.
If you notice the width has calc() removing the 5px from the border, if you desire you can remove that and place only 15%.
I think you only wanted a base structure and this is a really simple one, and you gotta love my color picking skills.
Edit: Replaced calc() by adding box-sizing: border-box thanks to #Paulie_D comment.
For layouts, consider using positioning and display properties. There are many ways to create a dynamic structure, that ensures responsiveness.
For more detail, please see this question and answer for some 'general' rules you may consider when creating a website.
.left {
position: absolute;
lefT: 0;
top: 0;
height: 100%;
width: 15%;
background: lightgray;
}
.right {
position: absolute;
left: 15%;
top: 0;
height: 100%;
width: 85%;
background: dimgray;
}
.left .fixedBlock {
margin: 0;
padding: 0;
height: 50px;
background: blue;
}
.left .filledDiv {
height: calc(100% - 100px);
background: tomato;
}
.left .filledDiv .third {
height: 33.33%;
background: rgba(0, 0, 0, 0.2);
}
.left .filledDiv .third:nth-child(2) {
background: rgba(0, 0, 0, 0.4);
}
<div class="left">
<div class="fixedBlock">fixed height</div>
<div class="filledDiv">
<div class="third">dynamic height</div>
<div class="third">with children</div>
<div class="third">a third of its heigth</div>
</div>
<div class="fixedBlock">also fixed height</div>
</div>
<div class="right">right side - open me in full screen!</div>
I am currently developing my own website. The first div container integrates a image to html. The second div with the classname "face" should show up directly beneath the image. It contains a text with predefined width and height.
Now the problem: It does not show up on the right of the image div. How can I show it on the right side?
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
margin-right: 0 !important;
}
.start {
margin-right: 10px;
}
.postpreview {
position: relative;
width: auto;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
}
<div class="one-half start postpreview">
<a href="#">
<img src="http://vocaloid.de/wp-content/uploads/2015/02/KAITO-6th-anniversary-2015-Project-DIVA-Arcade-Diamond-Dust-750x256.jpg" class="attachment-Beitragsbild wp-post-image">
</a>
</div>
<div class="face">Facebook
</div>
This should help. http://jsfiddle.net/13m3vbu1/3/
Insert into your css:
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
float: left;
margin-right: 0 !important;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
margin-right: 10px;
}
.one-half > a {
display: block;
width: 100%;
overflow: hidden;
}
I removed the redundant CSS that isn't needed as well.
If you just want the div with a class face to show on the right side of div one-half use float: left and instead of using pixels in .face use percent it's more flexible
CSS
.one-half {
float:left;
width: 45%; //adjust in what % you want
display: inline;
}
.face {
float: left;
width: 45%; //adjust in what % you want
display: inline;
}
Demo: http://jsfiddle.net/zz1ou0bv/
HTML:
<div class="header">header</div>
<div class="sidebox">sidebox</div>
CSS:
.header {
background-color: red;
height:60px;
}
.sidebox {
width: 210px;
background-color: blue;
color: black;
position: absolute;
bottom: 0;
top: 0;
}
How do I position the blue box just under the red box? I could for example add top: 68px; to the .sidebox to fix the problem but is there any other way to position it automatically, I would like to change the header height without being forced to change the top tag in sidebox to make it fit.
How do I position a brand new div that takes up the WHOLE white area under the red box and besides blue box? This should be automatic in case header/sidebox changes height/width. The green content should be replaced with this new div: http://i.gyazo.com/a41107cb7c1844b439f045ad85d40aec.png
If you always want the sidebar to occupy 100% of the window you could try this approach:
html, body { height: 100%; }
.header {
background-color: red;
height:60px;
}
.sidebox {
width: 210px;
background-color: blue;
color: black;
bottom: 0;
top: 0;
min-height: 100%;
}
http://jsfiddle.net/zz1ou0bv/2/
Here's my attempt: http://jsfiddle.net/rL8z9bm0/ .
Regarding your second question you should always have some kind of relation between the blue and yellow boxes, either pixels or percentage (better)
.sidebox {
width: 30%;
...
}
.content {
left:30%;
...
}
Seems like a good use case for the flexbox here:
Fiddle with Flexbox
Here's the relevant source:
HTML
<div class="wrapper">
<div class="header">header</div>
<div class="sidebox">sidebox</div>
<div class="content">content</div>
</div>
CSS
body {
height: 100vh;
margin: 0;
}
.wrapper {
display: flex;
flex-flow: row wrap;
height: 100%;
}
.header {
background-color: red;
height:60px;
flex: 1 100%;
}
.sidebox {
flex: 1 auto;
background-color: blue;
color: white;
}
.content {
flex: 4 auto;
background-color: sienna;
color: white;
height: calc(100% - 60px);
}
Hope that helps.
i have three classes
.wrapper
{
width: 100%;
float:left;
min-height: calc(100% - 80px );
background-color: #2d3e50;
}
.menu
{
width:7%;
float: left;
background-color: #2d3e50;
height: 100%;
}
.content
{
float: left;
padding: 20px 5px 20px 1%;
width:93% ;
background-color: #ffffff;
height: 100%;
}
<div class="wrapper">
<div class="menu"></div>
<div class="content"></div>
</div>
the height of the "wrapper" is perfect as per the calculation but i want height of the "menu" and "content" class 100% as per the "wrapper" class in all browser "safari" ,"chrome" also. but not working properly please suggest me css for all browser the problem is putting here as image![enter image description here][1]
Height in percentage would work only in IE not other browsers. For other browsers you should have a fixed height to your parent div.
Here is easy solution to make it work:
html,body{
height: 100%;
}
Add this CSS to .wrapper and .menu:
.wrapper {
position: relative;
}
.menu {
left: 0;
position: absolute;
}
and remove the
float: left;
from .menu. Does that give .menu a height of 100%?
If yes, then remove the
float: left;
from .content and add this to .content's CSS:
.content {
position: relative;
}
so it is my last suggesstion works fine in w3s tryit editor.<table class="wrapper"> <tr>
<td class="menu"></td>
<td class="content"></td>
</tr></table>
You can try it with display: table and display: table-cell.
Here is the demo
CSS
* {margin: 0}
html, body {height: 100%}
.wrapper
{
display: table;
height: calc(100% - 80px );
background-color: #2d3e50;
width: 100%
}
.menu
{
display: table-cell;
width:7%;
background-color: #2d3e50;
height: 100%;
}
.content
{
display: table-cell;
padding: 20px 0.5%;
width:92% ;
background-color: #ffffff;
height: 100%;
}
here is the sample html:
<div id = "mainWrapperDiv">
<div id = "mainDiv">
<div> testing </div>
</div>
</div>
<div id = "footerDiv">
</div>
its css:
*
{
padding: 0px;
margin: 0px;
}
body, html
{
height: 100%
}
div
{
border: none;
}
#mainWrapperDiv
{
min-height: 100%;
height: 100%;
margin-bottom: -200px;
}
#mainDiv
{
margin: 0px auto 0px auto;
width: 1000px;
min-height: 500px;
background: lightgreen;
}
#footerDiv
{
height: 200px;
width: 100%;
position: relative;
clear: both;
background: lightblue;
}
What sticky footer are you using? What does your code look like? You could try
http://www.cssstickyfooter.com/
Because the position is set to relative. and also the margin-bottom: -200px;
It's because of your margin-bottom in the #mainWrapperDiv. If you take that out it appears to work okay. Check it out http://jsfiddle.net/kA6XJ/