I have a container div that is not aligning properly, nor can I keep divs inside a container div aligned right or left. It keeps on coming out of the main div or container.
Here's my simple homepage design but the divs are not indenting properly according to this layout:
#container{
background-color:white;
width:100%;
height:1200px;
}
#logo{
background-color:yellow;
width:30%;
height:100px;
float:left;
}
#header{
background-color:green;
width:100%;
height:100px;
float:left;
}
#navigation{
width:100%;
height:40px;
background-color:white;
float:left;
}
#webname{
background-color:gray;
width:70%;
height:100px;
float:right;
}
#mainclass{
width:100%;
height:950px;
float:left;
}
#asideright{
background-color:red;
width:10%;
height:950px;
float:right;
}
#asideleft{
background-color:purple;
width:20%;
height:950px;
float:left;
}
#selection{
background-color:yellow;
width:70%;
height:950px;
float:center;
}
#footer{
background-color:green;
width:100%;
height:100px;
float:;left;
}
<html>
<head>
<title id="title">DUMMY
</title>
<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
<link rel="stylesheet" type="text/css" href="dumm1.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="webname">
</div>
</div>
<div id="navigation">
</div>
<div id="mainclass">
<div id="asideleft">
</div>
<div id="selection">
</div>
<div id="asideright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
this is your correct css
#container {
background-color: white;
width: 100%;
height: 1200px;
}
#logo {
background-color: yellow;
width: 30%;
height: 100px;
float: left;
}
#header {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
#navigation {
width: 100%;
height: 40px;
background-color: white;
float: left;
}
#webname {
background-color: gray;
width: 70%;
height: 100px;
float: right;
}
#mainclass {
width: 100%;
height: 950px;
/*float: left;*/
}
#asideright {
background-color: red;
width: 10%;
height: 950px;
float: right;
}
#asideleft {
background-color: purple;
width: 20%;
height: 950px;
float: left;
}
#selection {
background-color: yellow;
width: 70%;
height: 950px;
float: left;
}
#footer {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
There is no such property as float: center; you have to change that property for #selection to float: left;.
Please refer to this tutorial.
You can use this approach .
*
{
margin: 0;
padding: 0;
}
.container {
width: 1170px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color:red;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.inner_div
{
width: 25%;
float:left;
background-color:green;
}
.big_div
{
width: 75%;
float:left;
background-color:yellow;
}
<html>
<head>
<title id="title">DUMMY
</title>
<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
<link rel="stylesheet" type="text/css" href="dumm1.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="inner_div" style="background-color:purple;">
i'm the inner container
</div>
<div class="inner_div" style="background-color:pink;">
i'm another one
</div>
<div class="inner_div" style="background-color:green;">
another one
</div>
<div class="inner_div" style="background-color:orange;">
woho! another one
</div>
<div class="big_div">
yipee! i'm another container
</div>
<div class="inner_div" style="background-color:red;">
yehaa! i'm another container
</div>
</div>
<div id="navigation">
</div>
<div id="mainclass">
<div id="asideleft">
</div>
<div id="selection">
</div>
<div id="asideright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Related
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>
I'm trying to align my div #black under the div #brown, but it goes under the div #grey. How can I solve this problem?
This is how it looks now:
https://s18.postimg.org/n0fywi4qv/image.png
#cyan {
height:100px;
width: 100%;
background-color: cyan;
}
#brown {
height:200px;
width:35%;
float:left;
background-color: brown;
}
#orange {
height:400px;
width:25%;
background-color: orange;
float: left;
}
#blue {
height:400px;
width:20%;
background-color: blue;
float: left;
}
#white {
height:800px;
width:20%;
background-color: grey;
float: left;
}
#black {
height:200px;
width:35%;
background-color: black;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cyan"></div>
<div id="brown"></div>
<div id="orange"></div>
<div id="blue"></div>
<div id="white"></div>
<div id="black"></div>
</body>
</html>
This is how it should look like:
https://s21.postimg.org/3kyo9etqt/image.png
You need to combine #brown and #black into .combined <div>
Have a look at the code below:
.combined {
width: 35%;
float: left;
}
#brown {
height:200px;
display: block;
background-color: brown;
}
#black {
height:200px;
background-color: black;
}
#cyan {
height:100px;
width: 100%;
background-color: cyan;
}
#orange {
height:400px;
width:25%;
background-color: orange;
float: left;
}
#blue {
height:400px;
width:20%;
background-color: blue;
float: left;
}
#white {
height:800px;
width:20%;
background-color: grey;
float: left;
}
<div id="cyan"></div>
<div class="combined">
<div id="brown"></div>
<div id="black"></div>
</div>
<div id="orange"></div>
<div id="blue"></div>
<div id="white"></div>
Or, you can wrap the elements in a container, that way it will work even if the size of the elements change (although you're using fixed sizes with px, which is not recommended)
#cyan {
height:100px;
width: 100%;
background-color: cyan;
}
#brown {
height:200px;
width:100%;
float:left;
background-color: brown;
}
#orange {
height:400px;
width:25%;
background-color: orange;
float: left;
}
#blue {
height:400px;
width:20%;
background-color: blue;
float: left;
}
#white {
height:800px;
width:20%;
background-color: grey;
float: left;
}
#black {
height:200px;
width:100%;
background-color: black;
float: left;
}
#brownblackcontainer {
height: 400px;
width: 35%;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cyan"></div>
<div id="brownblackcontainer">
<div id="brown"></div>
<div id="black"></div>
</div>
<div id="orange"></div>
<div id="blue"></div>
<div id="white"></div>
</body>
</html>
Remove float and width property from #black and #brown rules
Wrap both in a #column-left container
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cyan"></div>
<div id="column-left">
<div id="brown"></div>
<div id="black"></div>
</div>
<div id="orange"></div>
<div id="blue"></div>
<div id="white"></div>
</body>
</html>
css
#column-left {
width: 35%;
float: left
}
#cyan {
height: 100px;
width: 100%;
background-color: cyan;
}
#brown {
height: 200px;
background-color: brown;
}
#orange {
height: 400px;
width: 25%;
background-color: orange;
float: left;
}
#blue {
height: 400px;
width: 20%;
background-color: blue;
float: left;
}
#white {
height: 800px;
width: 20%;
background-color: grey;
float: left;
}
#black {
height: 200px;
background-color: black;
}
I have this sample:
link
CODE HTML:
<div class="container">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
<div class="desc">
details
</div>
</div>
CODE CSS:
body{
background:black;
}
.container{
background:#f3f4f6;
border-bottom:5px solid #db5207;
}
.image-container,.desc{
display:inline-block;
vertical-align:top;
}
.desc{
background:red;
}
img{
width:612px;
height:412px;
border:10px solid white
}
I put an image to better understand what they want to do
basically I want the image to be over container and divul "desc" to be by end.
You can help me solve this problem? What is the best way to do this?
Thank you in advance!
Try this here code it may be solve your problem
*{margin:0;padding:0;}
.container{margin:100px 0;height:200px;border:5px solid red;position:relative;}
.image-container{height:300px;width:30%;border:5px solid blue;position:absolute;right:55%;top:-30%;}
.image-container img{height:300px;width:100%;}
.desc-container{height:190px;width:50%;border:5px solid green;float:right;}
<div class="container">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
<div class="desc-container">
details
</div>
</div>
Check the following code for your answer. Also you can verify the codepen https://codepen.io/sasikumarhx/pen/VKmQod
HTML:
<div class="container">
<div class="left">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
</div>
<div class="right">
<div class="desc">
details
</div>
</div>
</div>
CSS:
body{
background:black;
}
.container{
background:#f3f4f6;
border:5px solid #db5207;
height:250px;
}
.right{
float:right;
width:49%;
}
.left{
float:left;
width:49%;
}
.image-container{
}
.desc{
background:red;
}
img{
width:50%;
height:130%;
border:10px solid white;
float:right;
}
please check below code:
just need to change in css:
body{
background:black;
}
.container{
background:#f3f4f6;
border-bottom:5px solid #db5207;
margin-top: 50px;
height: 380px
}
.image-container,.desc{
display:inline-block;
vertical-align:top;
}
.desc{
background:red;
min-height: 380px;
display: inline-block;
}
img{
width:612px;
height:412px;
border:10px solid white;
position: relative;
top:-20px;
}
Please check the following if it satisfies your requirement:
<!DOCTYPE html>
<html>
<head>
<title>Solution</title>
<style type="text/css">
#container {
background-color: #DCDCDC;
position: relative;
left: 100px;
top: 100px;
width: 800px;
height: 200px;
padding: 5px;
}
#image {
background-color: #F0E68C;
width: 200px;
height: 255px;
position: relative;
left: 150px;
top: -80px;
}
#details {
background-color: #FF7F50;
position: relative;
width: 400px;
left: 380px;
top: -310px;
height: 190px;
}
h2 {
margin-top: 5px;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="container">
<h2>container</h2>
<div id="image">
<h2>image</h2>
</div>
<div id="details">
<h2>details</h2>
</div>
</div>
</body>
</html>
When I set the child div's margin-top property it always overflows and when I set the parent's position as relative and it's position as absolute it goes off to the side in the middle of the page. Child: menu_button_container, Parent: heading.
I want to move it within the parent div how can I accomplish this?
Css:
html, body
{
width:100%;
height:100%;
margin:0px;
}
.heading
{
width:100%;
height:20%;
background-color:green;
}
.content
{
width:100%;
height:80%;
background-color:orange;
}
.menu_button_container
{
display:inline-block;
margin-top:30%;
margin-left:0%;
float:left;
width:20%;
height:40%
}
.menu_button
{
background-color:purple;
border:none;
width:100%;
height:100%;
font: 14px;
color:white;
}
.center_text
{
width:80%;
height:100%;
background-color:blue;
margin-left: 10%
}
Html:
<!DOCTYPE html>
<html>
<head>
<title>template 1</title>
<link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>
<div class="heading">
<div class="menu_button_container" style="margin-left: 10%">
<button class="menu_button">Home</button>
</div>
<div class="menu_button_container">
<button class="menu_button">Link</button>
</div>
<div class="menu_button_container">
<button class="menu_button">Link</button>
</div>
<div class="menu_button_container">
<button class="menu_button">Link</button>
</div>
</div>
<div class="content">
<div class="center_text"></div>
</div>
</body>
</html>
I would appreciate any help in this matter.
I guess that's what you want?
body {
width: 100vw;
height: 100vh;
margin: 0px;
}
.heading {
position: relative;
width: 100%;
height: 20%;
background-color: green;
font-size: 0px;
}
.menu_button_container {
text-align: center;
position: absolute;
width: 80vw;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
}
.content {
width: 100%;
height: 80%;
background-color: orange;
}
.menu_button {
display: inline-block;
background-color: purple;
border: none;
width: 20vw;
font: 14px;
color: white;
}
.center_text {
width: 80%;
height: 100%;
background-color: blue;
margin-left: 10%
}
<div class="heading">
<div class="menu_button_container">
<button class="menu_button">Home</button>
<button class="menu_button">Link</button>
<button class="menu_button">Link</button>
<button class="menu_button">Link</button>
</div>
</div>
<div class="content">
<div class="center_text">
</div>
</div>
I have the following HTML and CSS code setting two pictures side by side and should shrink when pages shrinks, but this doesn't work.
I got rid of every class on parent divs, but still nothing...
Any idea why pictures do not shrink when browser window shrinks??
Thanks
.align {
position: absolute;
top: 75px;
z-index: -100;
}
.navigate {
margin: -10px 888px;
width: 200px;
z-index: 100;
}
.leftSide {
height: 558px;
margin: 20px 0px 0px 344px;
max-width: 500px;
}
.rightSide {
height: 558px;
margin: -5px 0px 0px 1053px;
max-width: 500px;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
margin: -557px 940px;
}
img {
width: 70%;
height: auto;
}
<div class="align">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a>
<a id="nextPic" href="#">Next>></a>
</div>
<div class="leftSide">
<img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
<div class="verticalLine"></div>
<div class="rightSide">
<img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
</div>
.align {
margin-left:auto;
margin-right:auto;
}
.container{
width:90%;
height:568px;
display:inline-block;
}
.navigate {
width: 100%;
text-align:center;
padding:20px;
}
.leftSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.rightSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
display:inline-block;
}
.leftSide img {
width:auto;
max-width:100%;
}
.rightSide img {
width:auto;
max-width:100%;
}
<div class="align">
<div class="container">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a> <a id="nextPic" href="#">Next>></a> </div>
<div class="leftSide"> <img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
<div class="verticalLine"></div>
<div class="rightSide"> <img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
</div>
</div>
add these two attributes to the div class,
.div_class
{
margin-left: auto;
margin-right: auto;
}