I have a problem with 5 floating divs, here is a picture:
You will see.. the green div should be on the left side from the red div(instead of the empty place) and the violet div on the place from the green div.
The html order from the divs is: blue, red, orange, green and violet, I think this is the reason for this white, empty space, because the green and the violet div comes in the html after! the red div, is this right?
What can i do, to fix this problem, anyone have an idea? I set the margin-top of the violet to -300px but I think this not a clean solution and than would be the order(html structure) false.
Here is my full html:
<!DOCTYPE html>
<html>
<head>
<title>ResponsiveExample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="js/libs/jquery/jquery.js"></script>
</head>
<body>
<div class="page-wrapper">
<header>
<div class="header">
</div>
<div class="below-header"></div>
</header>
<div class="main-content">
<div class="blue-box"></div>
<div class="red-box"></div>
<div class="orange-box"></div>
<div class="green-box"></div>
<div class="violet-box"></div>
</div>
<footer>
</footer>
</div>
</body>
</html>
And here is my CSS:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
}
.header{
position: fixed;
height: 50px;
width: 100%;
background-color: grey;
}
.below-header{
height: 50px;
width: 100%;
}
.blue-box{
height: 300px;
background-color: blue;
}
.red-box{
height: 600px;
background-color: red;
}
.orange-box{
height: 300px;
background-color: orange;
}
.green-box{
height: 300px;
background-color: greenyellow;
}
.violet-box{
height: 300px;
background-color: violet;
}
#media only screen and (min-width: 28.125em) {
.blue-box{
float: left;
width: 50%;
}
.red-box
{
float: left;
width: 100%;
}
.orange-box{
float: left;
width: 50%;
}
.green-box{
float: left;
width: 50%;
}
#media only screen and (min-width: 71.875em){
.blue-box{
width: 33%;
border: 5px solid black;
}
.red-box{
width: 33%;
border: 5px solid black;
}
.orange-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.green-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.violet-box{
width: 33%;
//margin-top: -300px;
border: 5px solid black;
float: left;
}
}
}
I would be very grateful for every help that I get!
Try this:
<div class="main-content">
<div id="left">
<div class="blue-box"></div>
<div class="green-box"></div>
</div>
<div id="center">
<div class="red-box"></div>
</div>
<div id="right">
<div class="orange-box"></div>
<div class="purple-box"></div>
</div>
</div>
Then apply CSS styles to your liking.
Related
I have a bootstrap container-fluid wrapped up in a div, and now i want the container-fluid to have height of 100% regardless of it's content but it seems it only take up the height of it content below is my code
Html
<div class="wrap">
<div class="container-fluid h-100 test">this is container-fluid
<div>hello my brother</div>
</div>
</div>
My css
html,
body {
height: 100%;
}
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
background: blue;
}
.test {
height: 100%;
background-color: yellow;
border: 1px solid red;
text-align:center;
}
.footer {
height: 60px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
padding-top: 20px;
}
now i want the yellow div to take up 100% height but it doesn't work as expected.. here is my fiddle
You are giving wrap a height:auto just remove that height:auto means that it will maintain it's own height to it childrens, If their are more childs then it will increase it's own height.Just remove that and add height:100%
html,
body {
height: 100%;
}
.wrap {
height: 100%;
margin: 0 auto -60px;
padding: 0 0 60px;
background: blue;
}
.test {
height: 100%;
background-color: yellow;
border: 1px solid red;
text-align:center;
}
.footer {
height: 60px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
padding-top: 20px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="wrap">
<div class="container-fluid h-100 test">this is container-fluid
<div>hello my brother</div>
</div>
</div>
</body>
<footer class="footer">
<div class="container">
<p class="pull-left">my site</p>
<p class="pull-right">2019</p>
</div>
</footer>
</html>
I am designing a dashboard interface for myself. I am having some problems with inner divs, my leftpane div is set to 100% height inside the parent but it is overflowing parent div by the amount of 50px which is the height of topbar. Please suggest me why it is overflowing, 100% should mean whatever available space there is, isn't it?
here is my css and html
html, body {
height:100%;
margin: 0px;
}
.wrapper {
width: 100%;
height: 700px;
margin: auto;
border: 1px solid black;
display: table;
}
.topbar {
height: 50px;
background: #353535;
background-color: #353535;
clear:both;
color: white;
width: 100%;
position:relative;
}
.leftpane {
width: 20%;
height: 100%;
background-color: #eee;
float: left;
border-right: 2px solid #353535;
}
.content {
width: 79%;
height: 100%;
float:right;
border: 2px solid red;
}
.content-header {
height: 50px;
background-color: #353535;
width: 100%;
}
.content-area {
height:100%;
width: 100%;
border: 2px solid green;
}
<html>
<head>
<title>GUYACOM - Suivi de la connectivité</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<!-- <link rel="stylesheet" href="css/bootstrap.css" /> -->
<!--<link rel="stylesheet" href="css/colorbox.css" /> -->
<!-- <script type="text/javascript" src="js/tinybox.js"></script> -->
</head>
<body>
<div class="wrapper">
<div class="topbar"><h1>
</h1></div>
<div class="content-area">
<div class="leftpane">
</div>
<div class="content">
<div class="content-header">
</div>
</div>
</div>
</div>
</body>
</html>
Try this it may help you...
<html>
<head>
<title>GUYACOM - Suivi de la connectivité</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<style>
html, body {
height:100%;
margin: 0px;
}
.wrapper {
width: 100%;
height: 100%;
margin: auto;
border: 1px solid black;
display: table;
}
.topbar {
height: 50px;
background: #353535;
background-color: #353535;
clear:both;
color: white;
width: 100%;
position:absolute;
}
.leftpane {
width: 20%;
height: 100%;
background-color: #eee;
float: left;
border-right: 2px solid #353535;
}
.content {
width: 79.5%;
height: 100%;
float: left;
border: 2px solid red;
}
.content-header {
height: 50px;
background-color: #353535;
width: 100%;
}
.content-area {
height:100%;
width: 100%;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="topbar"><h1>
</h1></div>
<div class="content-area">
<div class="leftpane">
</div>
<div class="content">
<div class="content-header">
</div>
</div>
</div>
</div>
</body>
</html>
I'm having this HTML/CSS code:
.container
{
max-width: 900px;
margin: 0 auto;
margin-top: 30px;
}
.divisions
{
border: 1px solid Black;
}
.Fisrt-Line
{
height: 180px;
}
.First
{
background-color: Green;
width: 32.2%;
}
.Second
{
width: 65%;
background-color: White;
margin-left: 20px;
}
.Second-Line
{
margin-top: 20px;
background-color: Blue;
float: left;
width: 100%;
height: 180px;
}
.Third-Line
{
height: 180px;
width: 31.6%;
float: left;
margin-top: 20px;
}
.Third-2
{
margin-left: 20px;
background-color: Red;
}
.Third-3
{
margin-left: 20px;
}
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="Styles/StyleSheet.css" rel="stylesheet" />
</head>
<body class="container">
<div class=" divisions Fisrt-Line First">
1</div>
<div class=" divisions Fisrt-Line Second">
2</div>
<div class="divisions Second-Line">
3
</div>
<div class="divisions Third-Line">
4
</div>
<div class="divisions Third-Line Third-2">
5
</div>
<div class="divisions Third-Line Third-3">
6
</div>
</body>
</html>
When I minimize the browser the second div and also the last div jump to next line. but I don't want that.
How should I edit the code so that those divisions just become smaller not jump to next line?
Do you mind to add additional wrappers for rows? if not please take a look here http://jsfiddle.net/ch0L9fy8/2/
Main update here beside row wrappers:
.divisions-line {
width: 100%;
}
.divisions {
box-sizing: border-box;
border: 1px solid Black;
}
I know the obvious solution is to wrap banner and main in a float container, but is there any other way to 'bump' sidebar to the top, given the constraints of the HTML below?
http://html-bin.appspot.com/aghodG1sLWJpbnIMCxIEUGFnZRjJ0wYM
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Floats</title>
<style>
#banner {
width: 70%;
float: left;
padding: 10px;
border: 1px solid blue;
}
#main {
width: 70%;
float: left;
padding: 10px;
border: 1px solid orange;
}
#sidebar {
width: 25%;
float: right;
padding: 10px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="banner">
Banner
</div>
<div id="main">
Main
</div>
<div id="sidebar">
Sidebar
</div>
</body>
</html>
#sidebar {
border: 1px solid green;
display: inline-block;
.display: inline;
.zoom:1;
padding: 10px;
width: 22%;
}
I need the #infoBar div and the #actualCover div to sit to the right of (next to) the #covers div, but for some reason, the covers div is acting like it's not even there and floats on top of the other divs.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
border: solid 1px orange;
}
#coverArea
{
border: solid 1px red;
width: 760px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
border: solid 2px #BFDEFF;
padding: 10px;
background-color: #F0F7FF;
margin-right: 30px;
}
#infoBar
{
height: 30px;
border: solid 1px green;
width: 600px;
}
#actualCover
{
width: 794px;
height: 1123px;
background-position: top left;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">
</div>
<div id="infoBar">
</div>
<div id="coverArea">
<div id="actualCover">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Here you go.
As a good practice, get your layout correct first before you set padding and margins.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
background: #ccc;
width: 911px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
background-color: #0ff;
}
#infoBar
{
height: 30px;
width: 600px;
float: right;
background: yellow;
}
#coverArea
{
width: 760px;
float: right;
background: #f60;
}
#actualCover
{
width: 794px;
height: 600px;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">Coveres
</div>
<div id="infoBar">InfoBar
</div>
<div id="coverArea">CoverArea
<div id="actualCover">ActualCover
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In this case, it sounds like you want #infoBar and #coverArea to float to the right of #covers instead of #covers floating to the left of the other two.
Try taking the float off of #covers and adding float: right; to #infoBar and #coverArea