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.
Related
I wonder why mainCountainerHeadLogo does not stretch parent div mainCountainerHead height?
If I scale the page, both mainCountainerHeadTitle and mainCountainerHeadMenu stretch mainCountainerHead just fine.
Sorry for my english and thanks in advance!
http://jsfiddle.net/gvcs0r6b/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.mainCountainer {
min-height: 100%;
width: 70%;
margin: 0 auto;
}
.mainCountainerHead {
background-color: aqua;
height: auto;
}
.mainCountainerHeadLogo {
height: 100px;
width: 20%;
background-color: blue;
float: left;
position: relative;
overflow: hidden;
}
.mainCountainerHeadLogo img {
position: absolute;
width: 100%;
height: auto;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
margin: auto
}
.mainCountainerHeadTitle{
margin-left: 20%;
width: 80%;
height: auto;
text-align: center;
padding-top: 3%;
}
.mainCountainerHeadMenu{
margin-left: 20%;
text-align: center;
background-color: orange;
width: 80%;
height: auto;
padding-top: 2%;
text-align: center;
}
.mainLink {
display: inline-block;
padding: 5px;
}
.mainLinkButton {
width: 90px;
height: 30px;
background-color: green;
font-size: 16px;
border: none;
color: white;
padding: 5px;
}
.mainLinkButton:hover {
background-color: darkgreen;
}
.mainLinkDropdown {
position: relative;
display: inline-block;
padding: 5px;
}
.dropdownContent {
display: none;
position: absolute;
min-height: 30px;
min-width: 130px;
text-align: left;
background-color: #f1f1f1;
z-index: 10;
}
.dropdownContent a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
}
.mainLinkDropdown:hover .dropdownContent{
display: block;
}
.dropdownContent a:hover{
background-color: #ddd;
}
<div class="mainCountainer">
<div class="mainCountainerHead">
<div class="mainCountainerHeadLogo">
<img src="https://i.ibb.co/cYzWJFM/logo-Copy.jpg" title="logo" />
</div>
<div class="mainCountainerHeadTitle">
<h4>Welcome aboard!</h4>
</div>
<div class="mainCountainerHeadMenu">
<div class="mainLink">
<button class="mainLinkButton">Main</button>
</div>
<div class="mainLinkDropdown">
<button class="mainLinkButton">Dropdown</button>
<div class="dropdownContent">
Link 1
Link 2
Link 3
</div>
</div>
<div class="mainLink">
<button class="mainLinkButton">Contacts</button>
</div>
</div>
</div>
</div>
In answer to your question:
That's because the float property puts the HTML elements out of the normal page flow, and this causes what you're experiencing. Its effect is similar to position: absolute which is to move the element to "a different layer".
How to solve it?
Well... there are a lot of ways to achieve what you want, and almost all of them requires to refactorize your code. Actually, you have a lot of code that makes it difficult to achieve your goal. You should get rid of float and start using other technics like Flexbox.
I could show you a solution if you provide a sketch of the layout you want.
change the CSS for img to this
.mainCountainerHeadLogo img {
width: 100%;
height: 100%;
margin: auto
}
building an overlay containing a stylised container for some text, however this container seems to be producing a margin which when combined with the elements normal width takes up the entire parent element width. According to chrome dev tools its the .flipcontainerelement that is causing this.
It's really weird behaviour and I can't figure out why its behaving in this way.
If I wanted to place content to the right of the container for example, I would not be able to because of this margin being produced.
.flipcontainer {
height: 230px;
width: 150px;
}
.flipcalender {
border: 1px solid #dddddd;
border-radius: 25px;
margin: 0 auto;
margin-top: 0.2px;
background: linear-gradient(white, #f4f2f2);
}
.mmouter {
width: 100%;
height: 100%;
border: 1.5px solid #dddddd;
}
.mmmiddle {
width: 98%;
height: 98%;
}
.mminner {
width: 98%;
height: 98%;
background: linear-gradient(white, #f4f2f2);
position: relative;
}
.mmbreaker {
width: 99%;
background-color: white;
height: 2px;
position: absolute;
z-index: 1;
top: 115px;
}
#mmlightbox {
display: block;
width: 400px;
height: auto;
position: fixed;
top: 30%;
left: 40%;
z-index: 999;
background-color: white;
padding: 10px 20px 10px 0px;
/* margin-right: 239px; */
margin-top: -100px;
margin-left: -150px;
border: solid 2px #f21c0a;
}
<div id='mmlightbox'>
<div class='flipcontainer'>
<div class='flipcalender mmouter'>
<div class='flipcalender mmmiddle'>
<div class='flipcalender mminner'>
<p class='daysremaining'></p>
<p>days</p>
<div class='mmbreaker'></div>
</div>
</div>
</div>
</div>
</div>
Add float: right; to .flipcontainer css like so:
.flipcontainer {
height: 230px;
width:150px;
float: right;
}
Here is the JSFiddle demo
The margin you saw was because you specified the width to '150px'.
Adding float: left removes this and you can add content next to it
.flipcontainer {
height: 230px;
width:150px;
float: left;
}
See Fiddle http://jsfiddle.net/epe3bfdw/
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
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;
}
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;
}