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;
}
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
}
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.
Hey I can't figure out why my divs are overlapping and what i should do...
You can watch the site here: http://hersing.dk/job/
I would like for the div carrying the hr to appear underneed the header-info div
Heres is the code from the site:
#font-face {
font-family: hersing;
src: url(lmroman10-regular.otf);
}
html,
body {
font-family: hersing;
height: 100%;
margin: 0px;
}
.container {
width: 90%;
height: 90%;
left: 5%;
top: 5%;
background: green;
position: absolute;
display: block;
clear: both;
}
.info-name {
left: 5%;
top: 10%;
position: absolute;
display: block;
}
.info-picture {
min-width: 250px;
min-height: 250px;
padding: 4px;
position: absolute;
top: 10%;
right: 5%;
background: black;
display: block;
}
.info-picture img {
height: 100%;
width: 100%;
}
#info-header {
font-size: 400%;
}
#info-title {
font-size: 150%;
font-weight: bold;
}
.header-info {
display: block;
padding: 20px;
position: relative;
width: 100%;
}
.stang-1 {
display: block;
width: 100%;
color: blue;
position: relative;
}
#hr-1 {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
background-color: #f1a857;
}
<div class="container">
<div class="header-info">
<div class="info-name" id="info-name">
...
</div>
<div class="info-picture" id="info-picture">
<img src="images/picture.png" />
</div>
</div>
<div class="stang-1" id="stang-1">
<hr id="hr-1">
</div>
</div>
I hope someome can figure this out, cause i'm pretty lost
Both .info-name and .info-picture are absolute positioned and .header-info has no height defined.
You'd rather use relative positioning + float + clear and/or display: inline-block for both .info-* rules and everything will be fine.
<div class="container">
<div class="header-info">
<div class="info-name" id="info-name">
.....
</div>
<div class="info-picture" id="info-picture">
<img src="images/picture.png" />
</div>
</div>
<div class="stang-1" id="stang-1">
<hr id="hr-1">
</div>
</div>
<style>
#font-face {
font-family: hersing;
src: url(lmroman10-regular.otf);
}
html,
body {
font-family: hersing;
height: 100%;
margin: 0px;
}
.container {
width: 90%;
height: 90%;
left: 5%;
top: 5%;
background: green;
position: absolute;
display: block;
clear: both;
}
.info-name {
left: 5%;
top: 10%;
position: absolute;
display: block;
}
.info-picture {
width: 250px;
height: 250px;
padding: 4px;
position: relative;
top: 10%;
left:70%;
background: black;
display: block;
}
.info-picture img {
height: 100%;
width: 100%;
}
#info-header {
font-size: 400%;
}
#info-title {
font-size: 150%;
font-weight: bold;
}
.header-info {
display: block;
padding: 20px;
position: relative;
width: 100%;
}
.stang-1 {
display: block;
width: 100%;
color: blue;
position: absolute;
}
#hr-1 {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
background-color: #f1a857;
}
</style>
I think this will solve your problem...
In this case, although very impractical, the solution would be to add a line break <br> after the .header-info div.
I repeat, this solution is not the best one by far, and you should, as pointed out in the comments by Paulie_D, change your positioning layout method.
Everything inside the absolutely positioned .container would be better positioned relative. Use css float:left; or float:right; to position elements and clear:both; when you want the next element to start below all floated elements. Use padding on the container and margins on the floated elements for positioning.
Also give .container css class of overflow:auto; to wrap around all elements inside without having to set the height every time.
im new to css and html i wanna cr8 a product box value like this
http://i.imgur.com/kMogtMz.png
I tried with these but didn't get any result.
I want .fill class to be dynamically modifiable.
Anyone can help me ?
.box {
width: 250px;
height: 30px;
background: grey;
color: white
}
.box .fill {
float: left;
width: 78%;
background: orange;
height: 100%;
}
.box .empty {
position: absolute;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill"><div class="fill-badge">Radeon 7870</div></div>
<div class="empty"><div class="empty-badge">125.6 GB/S</div></div>
</div>
You just need to look at your absolute and relative positioning. Make sure that all elements that are absolutely positioned are inside an element with relative defined as a position. So in this case you just need to add position: relative; to the .box.
.box {
width: 250px;
height: 30px;
background: grey;
color: white;
position: relative;
}
.box .fill {
float: left;
background: orange;
height: 100%;
}
.box .empty {
float: right;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
left: 0;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
position: absolute;
right: 0;
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill" style="width:60%;">
<div class="fill-badge">Radeon 7870</div>
</div>
<div class="empty">
<div class="empty-badge">125.6 GB/S</div>
</div>
</div>
Edited to show inline style.
You must set the .box position to relative. http://jsfiddle.net/Lzmop76a/
.box {
width: 250px;
height: 30px;
background: grey;
color: white
position: relative;
}
I would do it using a background color and a background image for the same element like:
.box {
width: 240px;
padding: 0 5px;
height: 30px;
line-height: 30px;
background: #fa0 url(http://placehold.it/250x300/aaa) 200px 0 no-repeat;
color: white;
}
.box span{
float:right;
}
<div class="box">
Radeon 7870 <span>125.6 GB/S</span>
</div>
I need your help,
How can the text inside the white part of the box be aligned dead center (aligned both vertically and horizontally)?
See picture below:
The desired result is:
Here's the HTML markup:
<!DOCTYPE html>
<html>
<head>
<title>Centered Div</title>
<style>
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
font-weight: bold;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#inner1 {
height: 100%;
border: 1px solid blue;
}
#inner2 {
height: 100%;
border: 1px solid green;
}
#titlebar {
cursor: pointer;
height: 23px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
line-height:22px;
}
#button {
line-height: 10px;
width: 18px;
font-size: 10px;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
}
#alertText {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="titlebar"><div style="padding-left: 3px;">Information Box</div></div>
<div><input id="button" type="button" value="X"></div>
<div id="alertText">This is some sample text that will appear here</div>
</div>
</div>
</body>
</html>
Here's a Fiddle
#alertText {
position: absolute;
width: 100%;
height: 20px;
top: 50%;
margin-top: -10px;
text-align: center;
}
If it is only going to be one line of text you can do this:
#alertText {
line-height: 58px;
text-align: center;
}
If you going to have more lines of text you might need to do it some other way. Possible with position.
In a recent project, I have coded this:
<div class="table">
<div class="cell">
<img src="whatever.png">
<p>Understand align</p>
</div>
</div>
<style>
.table { display: table; width: 100%; height:100%;}
.table .cell { display: table-cell; text-align:center; vertical-align: middle;}
</style>
Hope it is usefull. You can align a text or even a image inside the "cell" div.
this is actually harder than it looks. You might find this tutorial handy: http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/
you can use padding :
fiddle: http://jsfiddle.net/parslook/PgEwF/2/
#alertText {
max-width:400px;
padding:50px;
}
You can set your div to have a display: table; and use positioning to critically center the content within:
#alertText {
display: table;
position: absolute;
top: 0;
margin: auto;
left: 0;
bottom: 0;
right: 0;
text-align: center;
width: 100%;
}
This will also gracefully support multiple lines of text without any hardcoded or magic numbers.
Here is the result:
Codepen sketch.