I need to align 3 div's floated side by side. Below is my code however all the DIV's appear under each other, i'm guessing this is because of the fixed position. However this is the positioning I need for my website.
.one is sidelinks bar which I would like to have a min width: of 150px
.two is for adverts and instructions links
.three is a long div filled with data which needs to be scrollable. I tried to may methods but nothing works could jquery help? I want all to be of fixed position. I would also like the DIVs to remain the same size when the window is minimized.
Thanks
<!DOCTYPE html>
<html>
<head>
<style>
.one {
height:50px;
width:34%;
float:left;
background-color:red;
position:fixed;
}
.two {
height:50px;
width:33%;
float:left;
background-color:blue;
position:fixed;
}
.three{
height:50px;
width:33%;
float:left;
background-color:green;
position:fixed;
overflow:scroll;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
FOLLOW ON EDIT:
I'm able to split the DIVS apart but then the window is minimised the .two div floats over the .one div. see image https://postimg.cc/kDQSJpDR
.one {
height:50px;
width:33%;
float:left;
background-color:red;
position:fixed;
min-width:200px;
}
.two {
height:50px;
width:33%;
margin-left: 34%;
float:left;
background-color:blue;
position:fixed;
}
.three{
height:50px;
width:33%;
margin-left: 68%;
float:left;
background-color:green;
position:fixed;
overflow:scroll;
}
Did you want something like this?
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.justify-start {
justify-content: flex-start;
}
.flex-grow {
flex: 1 0 0;
}
.p-fixed {
position: fixed;
}
.w-150px {
height: 100%;
min-width: 150px;
max-width: 150px;
}
.wh-100v {
height: 100vh;
width: 100vw;
}
.wh-100p {
width: 100%;
height: 100%;
}
.overflow-scroll {
overflow: scroll;
}
.pink {
background-color: pink;
}
.red {
background-color: red;;
}
.green {
background-color: green;
color: white;
}
.text-justify {
text-align: justify;
}
<div class="flex-container justify-start wh-100v p-fixed">
<div class="w-150px flex-grow pink"></div>
<div class="wh-100p flex-grow red"></div>
<div class="wh-100p flex-grow green overflow-scroll text-justify">
<img src="https://via.placeholder.com/1000x1000"/>
</div>
</div>
If so, flexbox and a container as what #elbrant suggested is all that you'll need. Also, here's a working example :)
A quick note: Since both our flex-items' flex-grow property is set to the same value, those two above-mentioned items will always equally occupy their parent regardless of its size.
please add "margin-left:34%" in .two css and "margin-left:68%" in .three css.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
height:50px;
width:34%;
float:left;
background-color:red;
position:fixed;
}
.two {
height:50px;
width:33%;
margin-left: 34%;
float:left;
background-color:blue;
position:fixed;
}
.three{
height:50px;
width:33%;
margin-left: 68%;
float:left;
background-color:green;
position:fixed;
overflow:scroll;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
I believe you are trying to do this:
<!DOCTYPE html>
<html>
<head>
<style>
.one, .two, .three {
top:0;
position:fixed;
height:50px;
}
.one {
left:0;
width:34%;
background-color:red;
}
.two {
left:34%;
width:33%;
background-color:blue;
}
.three{
left:67%;
width:33%;
background-color:green;
overflow:scroll;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
The best way to make sure that your columns are in a set position (regardless of screen size) is to wrap them in a container.
CSS changes
Each of these grid-areas contain a series of numbers which designate where their sides are by top/left/bottom/right telling us that the sides of column .one are located at the position 1/1/2/2. It will be easier to understand if you draw a rectangle on a piece of scrap paper and put two lines in it from top to bottom, a rough draft of your column placement. Count your lines based on each column. For the first column: the top of the rectangle is line 1, the bottom is line 2. The left is line 1, the right side is line 2. Represented by 1/1/2/2. That gives each of your columns a fixed position.
.one {
grid-area: one 1/1/2/2;
height:150px;
min-width:150px;
background-color:red;
}
.two {
grid-area: two 1/2/2/3;
height:150px;
min-width:150px;
background-color:blue;
}
.three{
grid-area: three 1/3/2/4;
height:150px;
min-width:150px;
background-color:green;
overflow:scroll;
}
.grid-container {
display: grid;
grid-template areas: 'one two three';
margin-left: auto;
margin-right: auto;
padding: 0;
max-width: 100%;
position: center;
border: solid 1px #000;
}
.grid-container > div {
margin: 5px;
padding 0;
}
HTML changes
<div class="grid-container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div><!-- end container div -->
Related
I need the yellow div to float beside the the purple square. Orange on top, pink on the bottom and yellow to the left of the square. It worked when I took off the flex-wrap:wrap; from the right div but then all three divs went to the left. Is there anyway to just have the yellow div float to the right of the purple square to take up the remainder of the green area while the other two stay in their current spots?
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-direction: column;
}
#right>* {
flex: 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
margin-left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
}
#rightsidebottom{
background-color:pink;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div id="logo"></div>
<div id="rightsideright"></div>
<div id="rightsidebottom"></div>
</div>
</div>
This should work as intended.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-direction: column;
}
#right>* {
flex: 1;
}
#logo {
width: 100%;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
flex: 1;
}
#rightsidebottom{
background-color:pink;
}
.wrapper {
display: flex;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div class="wrapper">
<div id="logo"></div>
<div id="rightsideright"></div>
</div>
<div id="rightsidebottom"></div>
</div>
</div>
Edit: To make this answer a bit more universal, here is how the principle works: if you want div A to grow up to a max size, and div B to fill the remaining space, you have to make sure that:
The container is display: flex
A has width: 100% and has a max-width
B has flex: 1
Take note that if A would have flex: 1 as well, its greedy 100% would be overruled by the more generous flexing rule. Therefore the most minimal working example is:
.container {
display: flex;
}
.up-to-max {
width: 100%;
max-width: 100px;
background: red;
}
.filler {
flex: 1;
background: green;
}
<div class="container">
<div class="up-to-max">A</div>
<div class="filler">B</div>
</div>
(Watch in full page to resize the window)
You have to modify your html a bit and to adapt the css.
On a side note, you shouldn't use that much id, use classes.
Also, use flex-basis to give flex children a width.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-direction: column;
}
#right>*,
#right>* > *{
flex: 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
margin-left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
}
#rightsidebottom{
background-color:pink;
}
.wrapper {
display: flex;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div class="wrapper">
<div id="logo"></div>
<div id="rightsideright"></div>
</div>
<div id="rightsidebottom"></div>
</div>
</div>
I'm trying to rearrange 3 divs when device width is below 900px. They are arranged as three columns (2 floating divs and main one in the middle) and i don't know how to make them be 2 columns and third div below them (Image shows what i'm aiming at).
Thank you in advance :)
Adding code as you asked :) here is html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header></header>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
</body>
</html>
and here is css
#container{
width: 90%;
margin: 0px auto 0px auto ;
}
header{
width: 100%;
height: 200px;
background-color: blue;
}
#left{
float: left;
width: 20%;
height: 500px;
background-color: orange;
}
#right{
float: right;
width: 20%;
height: 500px;
background-color: green;
}
#middle{
width: 80%;
background-color: red;
height: 500px;
}
if i make right div float:none then it moves the middle div
You need to use media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Enjoy
With media queries and flex.
Here is a snippet, (click on run then full screen).
<div class="flex">
<div class="sub c">1</div>
<div class="sub c">2</div>
<div class="doge c">3</div>
</div>
.flex{
display: flex;
flex-wrap: wrap;
}
.c{
height:20px;
width:20px;
border: 1px solid green;
box-sizing: border-box;
}
#media(max-width:600px){
.sub{
width: 50%;
}
.doge{
width: 100%
}
}
<div class="flex">
<div class="sub c"></div>
<div class="sub c"></div>
<div class="doge c"></div>
</div>
Welcome to the world of {in an ominous voice} RESPONSIVE DESIGN ! ,
To perform what you are trying to do you will need to explore Media Queries.
Here is an example of what you are trying to do: JSFiddle
HTML
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
<div class="bottom">
Bottom content flexible width
</div>
</div>
CSS
.container {
height: 100px;
overflow: hidden;
}
.left {
float: left;
background: #00FF00;
width: 25%;
overflow: hidden;
height: 100%;
}
.right {
display: inline-block;
width: 50%;
background: #0000ff;
height: 100%;
}
.bottom {
float: right;
background: #ff0000;
display: inline-block;
width: 25%;
height: 100%;
}
#media only screen and (max-width: 900px) {
.container {
height: auto;
overflow: hidden;
}
.left {
float: left;
background: #00ff00;
width: 25%;
overflow: hidden;
height: 100px;
}
.right {
float: none;
width: 75%;
background: #0000ff;
height: 100px;
}
.bottom {
position: relative;
float: none;
background: #ff0000;
width: auto;
overflow: hidden;
height: 50px;
display: inherit;
}
}
Good luck!
It would be helpful to see your sourcecode to tell you why it has not worked. At least you could describe it in more detail. Otherwise I would suspect that clear: both could maybe help you here by redefining a div-class in a media-query. At least this has worked for me.
As an example you could just attach float: left for the left column then the middle column would be following on the right side. By redefining the right-column (class) with clear: both the right-column would then be a footer. This is just an example and would not be the best solution indeed.
Here's my take on it.
/* Styles go here */
body,html{
margin: 0;
padding: 0;
height:100%;
}
.wrapper{
height:100%;
width:100%;
padding: 20px;
}
.div1{
height:100%;
width:30%;
float:left;
background-color:orange;
}
.div2{
height:100%;
width:30%;
float:left;
margin-left:2%;
background-color:red;
}
.div3{
height:100%;
width:30%;
margin-left:2%;
float:left;
background-color:green;
}
#media(max-width:900px){
.wrapper{
height:100%;
width:100%;
clear:both;
}
.div1{
height:70%;
width:49%;
float:left;
background-color:orange;
}
.div2{
height:70%;
width:49%;
float:left;
background-color:red;
}
.div3{
height:30%;
width:100%;
float:left;
margin:20px 0 20px 0;
background-color:green;
}
}
<div class="wrapper">
<div class="div1"><p></p></div>
<div class="div2"><p></p></div>
<div class="div3"><p></p></div>
</div>
<style type="text/css">
.container{
position:center;
margin-left:500px;
margin-right:500px;
}
header {
height:200px;
background-color:green;
}
footer {
height:100px;
background-color:red;
}
.body {
display:flex;
flex-direction:row;
height:650px;
}
.side {
background-color:yellow;
flex:0.5;
}
.middle {
background-color:teal;
flex:2;
}
</style>
</head>
<body>
<div class="container">
<header> I'm a header idiot</header>
<div class="body">
<div class="side"> Stuff</div>
<div class="middle">More Stuff</div>
</div>
<footer>SHEEEEEEEEEET</footer>
</div>
</body>
I'm trying to make a webpage that is formatted similarly to this:
The code I have currently is a very botchy, way of doing it but doesn't scale with window size and only looks good full screen relative to my screen size. What am I missing? It is supposed to be centered on the page and not have its width spread across the whole screen.
You have to remove just:
.container {
margin-left: 500px;
margin-right: 500px;
}
from your code will solved your issue.
Check Fiddle
And for getting output same as image(like center div). Give parent text-align:center;. Here body is parent so.
body{
text-align:center;
}
Check Updated Fiddle
<!DOCTYPE html>
<style>
#main{
height:500px;
width:100%;
}
#div1{
width:99%;
height:25%;
border: 2px solid;
margin-bottom:2%;
top: 30px;
}
#div2{
width:20%;
height:60%;
border: 2px solid;
margin-bottom:2%;
float:left;
}
#div3{
width:78%;
height:60%;
border: 2px solid;
margin-bottom:2%;
float:right;
}
#div4{
width:100%;
height:10%;
border: 2px solid;
float:left;
}
</style>
<body>
<div id="main">
<div id="div1">11
</div>
<div id="div2">33
</div>
<div id="div3">222
</div>
<div id="div4">
test
</div>
</div>
</body>
</html>
Description:- You jsut nedd to give margin for adjusting all layouts and need to remove (.container) Class .Below is code you can check that.
Code:-
<style type="text/css">
.body {
display:flex;
flex-direction:row;
height:650px;
}
header {
height:200px;
background-color:green;
margin:20px 20px 0px 20px;
}
footer {
height:100px;
background-color:red;
margin:15px 20px 0px 20px;
}
.side {
background-color:yellow;
flex:0.5;
margin:15px 10px 0px 20px;
}
.middle {
background-color:teal;
margin:15px 20px 0px 10px;
flex:2;
}
</style>
</head>
<body>
<div >
<header> I'm a header bitch</header>
<div class="body">
<div class="side"> Stuff</div>
<div class="middle">More Stuff</div>
</div>
<footer>SHEEEEEEEEEET</footer>
</div>
</body>
Change your .container to this. You can use any width you like.
.container {
/* position:center; */
margin-left:auto;
margin-right:auto;
width:100%
}
.container {
/* position:center; */
margin-left: auto;
margin-right: auto;
width: 100%
}
header {
height: 200px;
background-color: green;
}
footer {
height: 100px;
background-color: red;
}
.body {
display: flex;
flex-direction: row;
height: 650px;
}
.side {
background-color: yellow;
flex: 0.5;
}
.middle {
background-color: teal;
flex: 2;
}
<div class="container">
<header>I'm a header</header>
<div class="body">
<div class="side">Stuff</div>
<div class="middle">More Stuff</div>
</div>
<footer>footer</footer>
</div>
I have 3 blocks - block1, block2, block3..block1 & 2 are left floated
http://jsfiddle.net/MTSg4/1/
The text inside block3 needs to be displayed inside the block but for some reason its displaying outside.
css
html, body{
height: 100%;
width:100%;
}
#block1{
height:10%;
width:50%;
text-align:center;
float:left;
background-color:red;
}
#block2{
height:90%;
width:50%;
background-color:green;
float:left;
}
#block3{
height:90%;
width:50%;
background-color:yellow;
}
html
<div id="block1">
Block 1
</div>
<div id="block2">
Block 2
</div>
<div id="block3">
Block 3
</div>
You need to clear the floats in blocks 1 and 2. Try this for block3:
#block3{
height:90%;
width:50%;
background-color:yellow;
clear:both;
}
Your usage of floats is the problem. You see, block 2 is just a trial and error. It does not float left. Check this FIDDLE.
#block2{
height:90%;
width:50%;
background-color:green;
float:right;
}
#block3{
height:90%;
width:50%;
background-color:yellow;
float: left;
}
Hope this helps!
Use this css
#block1 {
height: 10%;
width: 50%;
text-align: center;
background-color: red;
display: block;
float: left;
}
#block2 {
height: 90%;
width: 50%;
text-align: center;
background-color: green;
display: block;
float: left;
}
#block3 {
height: 90%;
width: 50%;
text-align: center;
background-color: yellow;
display: block;
clear: both;
}
I think you need to rethink the HTML to achieve this.
Perhaps a better solution is to split this into two columns, with block 1 and 2 in the first column, and block 3 in the second?
HTML
<div id="col1">
<div id="block1">
Block 1
</div>
<div id="block2">
Block 2
</div>
</div>
<div id="col2">
<div id="block3">
Block 3
</div>
</div>
CSS
html, body{
height: 100%;
width:100%;
}
body {
margin: 0;
}
#col1, #col2 {
float: left;
width: 50%;
height: 100%;
}
#block1{
height:10%;
text-align:center;
background-color:red;
}
#block2{
height:90%;
background-color:green;
}
#block3{
height:100%;
background-color:yellow;
}
Demo
Try this CSS:
html, body{
height: 100%;
width:100%;
}
#block1{
height:10%;
width:50%;
text-align:center;
float:left;
background-color:red;
}
#block2{
height:90%;
width:50%;
background-color:green;
float:right;
}
#block3{
height:90%;
width:50%;
background-color:yellow;
float: left;
}
.clear {
clear: both;
content: ' ';
*zoom: 1;
}
}
in your HTML:
<div id="block1">
Block 1
</div>
<div id="block2">
Block 2
</div>
<div id="block3">
Block 3
</div>
<div class="clear"></div>
This happens because the "block3" is floating around and not in a position while the other boxes are being called in left (including the box2 [It should be float: right]).
I've fixed and and added a debug class (clear).
Jsfiddle: Demostration
Hope it helps!
here a parent div like this
.div parent{
width:100%;
height:100%;
text-align:center;
}
.div child{
width:10%;
height:10%;
}
In responsive web mobile devices the child div is not align vertically middle how can i align middle?? please help me..
Thanks.
Try adding :
.div parent{
vertical-align: middle;
width:100%;
height:100%;
text-align:center;
}
FIDDLE
This is an alternative take, using CSS tables
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<div>Child</div>
</div>
</div>
</div>
CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
width:100%;
height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
border:1px solid grey;
vertical-align:middle;
text-align:center;
}
.cell div {
background:red;
display:inline-block;
margin:0 auto;
}
You have written .div parent seems to be an invalid selector, If you are trying to select a div with class parent, it should be selected using div.parent (Same applicable to your child div also).
Try this;
Apply diplay:table-cell; to .parent div, So that it will get the ability to align its child vertically middle.
then apply vertical-align:middle to the same to make the child elements vertically middle
div.parent{
width:100%;
height:100%;
text-align:center;
display:table-cell;
vertical-align:middle;
}
I know this post is old but here is another approach with Flex (also available in CodePen - http://codepen.io/KErez/pen/kXzYAj):
HTML:
<div class='a'>
<div class='b'>
Inner
</div>
</div>
CSS (the colors are just for showing the boxes clearly):
.a {
display: flex;
justify-content: space-around;
align-items: center;
color: #ffffff;
background-color: #223344;
width: 100%;
height: 100%;
}
.b {
display: flex;
justify-content: space-around;
align-items: center;
width: 75px;
height: 100px;
background-color: #999999;
color: #00ff00;
}
Very simple solution that I have used many times.
.a {
width: 300px;
height: 300px;
background-color:#666;
}
.b {
margin:auto;
width: 75px;
height: 100px;
top: calc(50% - 50px);
text-align:middle;
position: relative;
background-color:#111;
}
<div class='a'>
<div class='b'>
</div>
</div>