I have the following HTML snippet:
<body>
<div class="main">
<div class="topBar">
<p>testing</p>
</div>
<div class="content">
<div class="broadcastBar">
<p>testing</p>
</div>
<div class="mainBody">
<p>more testing</p>
</div>
</div>
</div>
</body>
Here is my CSS:
div.main {
}
div.topBar {
background-color: Black;
color: White;
height: 50px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
div.broadcastBar {
background-color: Gray;
width: 300px;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
}
div.content {
background-color: Yellow;
position: absolute;
width: 100%;
top: 50px;
left: 0px;
height: 100%;
}
My question is this. As you can see by the markup and CSS, I'm trying to have divs be the sections of the screen. But because <div class="content" /> has a position of absolute, it is causing the div to push below the browser window by 50px (which is what it is relative to the topBar).
I've tried making it so that the content div doesn't have to be position absolute, but everything just pushes the divs all around and the div edges are no longer flush to each other or the browser window.
Any idea what I can do hear to alleviate my issue?
Edit
Added desired output: this screenshot is currently what the above markup and CSS render. This is what I'm going for (for the most part, without the extended/scroll bar effect). I want to have my divs flush against each other and to the browser window.
What is the best way to do this if not through absolute positioning?
What you are going to want to learn is using some standard formatting practises with float.
Using absolute to position your elements will in the long run hurt you. If all your elements are using float, you will be able to better control their appearance.
For Example:
div.topBar {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.broadcastBar {
background-color: Gray;
width: 70%;
height: 80%;
float: left;
}
div.content {
background-color: Yellow;
width: 30%;
height: 80%;
float: left;
}
#EDIT:
So you Have 3 divs and you will want to stack them sequencially.
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
Float follows this sequence so that by using these properties, elelments will be forced to fall after one another based on space constraints:
div.header {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.left {
background-color: Gray;
height: 80%;
width: 70%;
float: left;
}
div.right {
background-color: Yellow;
height: 80%;
width: 30%;
float: left;
}
#QUESTION:
So If you need to use pixel measurements, then you will need to encapsulate all of the elements in another container with the max width and height that your layout will be.
<div class="container">
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
</div>
div.container{
height: 100px;
width: 100px;
float: left;
}
div.header {
background-color: Black;
color: White;
height: 20px;
width: 100px;
float: left;
}
div.left {
background-color: Gray;
height: 80px;
width: 70px;
float: left;
}
div.right {
background-color: Yellow;
height: 80px;
width: 30px;
float: left;
}
Related
I need my two white divs to stay in the exact same place compared to my black div in the middle. The should stay the exact same distance away from the black div when minimizing the page.
#halvfjerds {
width: 100%;
height: 1050px;
background-color: blue;
}
#halvfjerds .timeline {
background-color: black;
}
#halvfjerds .linje1 {
width: 500px;
height: 100px;
background-color: white;
margin-left: 18vw;
margin-top: 220px;
float: left;
display: block;
position: absolute;
}
#halvfjerds .linje2 {
width: 500px;
height: 100px;
background-color: white;
margin-left: 54vw;
margin-top: 780px;
float: left;
display: block;
position: absolute;
}
.timeline {
height: 95%;
width: 100%;
float: left;
margin-top: 1.4%
}
<div id="halvfjerds">
<div class="timeline">
</div>
<div class="linje1">
</div>
<div class="linje2">
</div>
</div>
Hope someone out there can help!
#halvfjerds .timeline {
background-color:black;
position: relative;
}
I don't know if that is what you need, if it's don't just let me know
You have to set the same margin-left: 18vw;
If not like this solution, so I don't understand
All you need is to give position:absolute style property to divs.
My problem is demonstrated in the following jsfiddle. It works fine in Chrome but not in Firefox:
https://jsfiddle.net/m0u175o8/1/
There should be no pink showing up on the right side, the area above the footer should be black (canvas).
I've got a footer at the bottom of the page. The height of the footer needs to be determined dynamically based on its contents. Above it sits a canvas that should take up the remaining portion of the screen. There are a couple of other panes like a header and a side bar. I included them in the jsfiddle but I'm not sure they have effect on the problem.
In actuality, the contents of my panes are laid out using bootstrap 3 so the jsfiddle imports bootstrap.
For reference, here is the HTML:
<div class="header">header<div>
<div class="left-pane">scrollable</div>
<div class="right-pane">
<div class="canvas-wrapper">
<canvas></canvas>
</div>
<div class="bottom-pane">dynamic <br> height <br> footer</div>
</div>
Here is my CSS:
body, html {
height: 100%;
color: white;
text-align: center;
}
.header {
position: fixed;
width: 100%;
height: 20px;
background: green;
}
.left-pane {
position: relative;
float: left;
width: 25%;
margin-right: -75%;
height: 200vw;
background: blue;
z-index: 101;
}
.right-pane {
position: fixed;
top: 20px;
padding-bottom: 20px;
bottom: 0px;
width: 100%;
height: 100%;
padding-left: 25%;
float: left;
z-index: 100;
display: table;
background-color: pink;
}
.canvas-wrapper {
height: auto;
width: 100%;
display: table-row;
}
.bottom-pane {
height: 1px;
width: 100%;
background: red;
display: table-row;
}
canvas {
background: black;
width: 100%;
height: 100%;
}
Please see the below code and screenshot. Can anyone please explain why there are white gaps between the divs and how to remove them? I would like the divs sit next to one another without any margin between them
![
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #b3b3b3;
font-family: arial;
font-size: 14pt;
}
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top: -338px;
margin-left: -552px;
top: 50%;
left: 50%;
}
#centerdiv {
display: inline-block;
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
line-height: 50px;
position: absolute;
}
#leftdiv {
position: absolute;
background-color: #ff000f;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
}
#rightdiv {
position: absolute;
background-color: #000fff;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
text-align: right;
}
#lowerrightdiv {
position: absolute;
background-color: #fff000;
width: 80px;
height: 50px;
text-align: right;
display: inline-block;
line-height: 50px;
}
.arrowimg img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="containerdiv">
<div id="leftdiv"><img class="arrowimg" src="leftarrow.png"></div>
<div id="centerdiv">
</div>
<div id="rightdiv"><img class="arrowimg" src="rightarrow.png"></div>
<div id="lowerleftdiv">?</div>
<div id="lowercenterdiv">?</div>
<div id="lowerrightdiv">?</div>
</div>
</body>
</html>
You could try to remove all your position: absolutes, as they make things complicated. What you want is: three boxes next to each other, then three boxes next to each other below it. If you float them to the left, you solve this problem. I have amended your CSS, just copy and paste and you can see the gaps disappear because floating elements don't care about whitespaces. There are other difficulties involved with floating, but it does solve your problem.
I have also removed everything I didn't need to get my point across.
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top:-338px;
margin-left:-552px;
top:50%;
left:50%;
}
// I added this to float all the divs inside your container to float
#containerdiv div {
float: left;
}
#centerdiv {
// I removed position: absolute from every box, as well as line-heights, align and display
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align:center;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
}
#leftdiv {
background-color: #ff000f;
width: 80px;
height: 576px;
}
#rightdiv {
background-color: #000fff;
width: 80px;
height: 576px;
}
#lowerrightdiv {
background-color: #fff000;
width: 80px;
height: 50px;
}
Add this to your css:
* {
margin: 0;
padding: 0;
}
This is a weird thing in how html is interpreted. The whitespace between the divs is rendered as a space. There are many ways to solve this, and none of them are very pretty.
One way is like this:
<div id="leftdiv">
<img class="arrowimg" src="leftarrow.png">
</div>
<div id="centerdiv">
</div>
<div id="rightdiv">
<img class="arrowimg" src="rightarrow.png">
</div>
<div id="lowerleftdiv">
?
</div>
<div id="lowercenterdiv">
?
</div>
<div id="lowerrightdiv">
?
</div>
Hope its fix
{
margin: 0;
padding: 0;
border-sizing: border-box;
}
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
So I have this html
<div class="app-wrapper">
<div class="search-form"/>
<div class="results">
<div class="tabs"/>
</div>
</div>
search-form has absolute positioning and is floated left. I want tabs to appear next to it, but at the top of the page. Note it doesn't have to be that tabs is always on the screen(fixed is not required).
Right now I have
.search-form {
position: absolute;
width: 30%;
min-width: 200px;
max-width: 350px;
height: 100%;
min-height: 600px;
float: left;
}
.tabs {
position: fixed;
border-bottom: 1px solid #section-border;
width: 70%;
height: 3.0em;
float: right;
left: 31%;
background: #tabs-background;
}
But this doesn't work because on larger screens the distance between tabs and the search-form expands.
How do I get it so tabs is next to search-form, fills up the rest of the page, and that the distance between tabs and search-form does not depend on screen size?
So I just realized that tabs is inside of another div, with CSS
.results {
width: 70%;
}
Maybe this is what you are looking for: http://jsbin.com/ofagoq/11/edit
The CSS:
.search-form {
background-color: red;
width: 30%;
min-width: 200px;
max-width: 350px;
height: 100%;
min-height: 600px;
float: left;
}
.tabs {
background-color: green;
width: 70%;
height: 3.0em;
}
This is an approach using % for your widths only. You could set max and min widths as well in %. http://jsbin.com/upucob/1/
.app-wrapper {
width:90%;
float:left;
margin:1em 3%;
padding: 1em 2%;
background: #CCC;
}
.search-form {
width: 30%;
min-height: 600px;
float: left;
background:#999;
}
.tabs {
width: 70%;
height: 3.0em;
float: left;
border-bottom: 1px solid #000;
background:#888;
}
<div class="app-wrapper">
<p>This is the outter container</p>
<div class="search-form">
<h3>Form goes here</h3>
</div>
<div class="tabs">
<h3>Tabs</h3>
</div>
<div class="results">
<h3>The Results</h3>
</div>
</div>