This question already has answers here:
display: inline-block extra margin [duplicate]
(12 answers)
Closed 8 years ago.
I am trying to achieve this simple structure without using floats: http://cl.ly/image/120w2S12213O
I am new to Web Design so I am a bit lost. Why green and red elements are separated by a white gap? It's not padding, nor margin... I can't understand it. Thank you.
This is the HTML:
<body>
<header></header>
<section></section>
<aside></aside>
<footer></footer>
</body>
And this is the CSS.
body {
width: 1024px;
height: 612px;
margin: 0 auto; }
header {
position: relative;
top: 0;
width: 100%;
height: 100px;
box-sizing: border-box;
background-color: blue; }
section {
position: relative;
margin: 0;
padding: 0;
width: 70%;
height: 600px;
box-sizing: border-box;
background-color: red;
display: inline-block; }
aside {
position: relative;
margin: 0;
padding: 0;
left: 0;
width: 28%;
height: 600px;
box-sizing: border-box;
background-color: green;
display: inline-block; }
It's because you're declaring them as display: inline-block and then you went on a new row in your code, resulting in a blank space. You can fix it with:
<header></header>
<section></section><!--
--><aside></aside>
<footer></footer>
or
<header></header>
<section></section><aside></aside>
<footer></footer>
see this demo: http://jsfiddle.net/jonigiuro/cE4t5/
Also, I don't see a reason tu use display: inline-block and floats together
The space is due to the fact that the element are inline, and inline elements are sensitive to white space. Simply remove the space in your code and the gap goes away.
<header></header>
<section></section><aside></aside>
<footer></footer>
jsFiddle example
You must use on the section float:left and put width:30% on the aside:
section {
position: relative;
margin: 0;
padding: 0;
width: 70%;
height: 600px;
box-sizing: border-box;
background-color: red;
display: inline-block;
float: left;
}
aside {
position: relative;
margin: 0;
padding: 0;
left: 0;
width: 30%;
height: 600px;
box-sizing: border-box;
background-color: green;
display: inline-block;
}
Watch the demo: http://jsfiddle.net/9kELA/
Related
in situations where the content is small and body height: 100%, the footer is pressed to the bottom of the window, a pop-up absolute very long menu (longer then body height) increases the height of the document, resulting in a lot of free space after the footer. The problem is that the body height is at this point less than the document height.
How, using css, to force the body height to follow the height of the document.
Example on jsfiddle
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height: 100%;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
upd.
is looking for an css solution.
On JS (jQuery), it can be done some like this:
$("body").height($(document).height());
The issue is due to the .ab element having position: absolute;. This causes the element to be taken out of the document flow, resulting in the document height not changing.
Change the .ab to position: relative to fix this, but this might require some other HTML/layout changes.
function addElement() {
document.getElementById("ab").classList.add("show")
}
html,
body {
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
min-height: 100%;
box-sizing: border-box;
}
#ab {
box-sizing: border-box;
width: 90vw;
margin: 30px 5vw;
height: 150vw;
position: relative;
border:1px solid yellow;
display: none;
}
#ab.show {
display: block;
}
<div class="main">
<div id="ab"></div>
<button onclick="addElement()">Add tall element</button>
</div>
<style>
</style>
you can try this this will increase the height of main div and remove scroll or else u can give overflow-y:scroll
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height:100%;
overflow-y:scroll;
position:relative;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
I have two boxes inside my <header>-tag, which has a total width of 100%. When i align them up they fit perfect, but when i'm shrinking the window the right box jumps down beneath the left one. Here's the code:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
background-image: url('img/header.jpg');
height: 120px;
margin-right: 10px;
width: 65%;
}
#userinfo {
float: left;
height: 100px;
width: 33.2%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
</section>
<section id="userinfo">
test
</section>
</header>
Any quick fixes? Imagining this happens with the rest of my design as I'm moving forward. Thanks in advance.
The problem here is you are using some values for padding and margin on your elements and those by default are added to the actual size of the element, since both elements are 98.2% of the container +20 of the values at some point they don't fit into the 100% and will break.
To solve it you can use box-sizing property which will make the padding and border values be inside the total declared size, and since that doesn't work with margin you will need an extra container to use padding and create the separation:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
box-sizing:border-box;
padding-right: 10px;
width: 65%;
}
#head > div {
background-image: url('http://placehold.it/500');
height: 120px;
}
#userinfo {
box-sizing:border-box;
float: left;
height: 100px;
width: 35%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
<div></div>
</section>
<section id="userinfo">
test
</section>
</header>
Thanks DaniP, that solved it. But what about the content and sidebars part then?:
#container {
margin: 30px auto;
width: 70%;
min-height: 400px;
}
#leftmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
#content {
float: left;
box-sizing: border-box;
width: 60%;
background-color: #202020;
min-height: 600px;
}
#content > div {
background-color: #202020;
min-height: 600px;
}
#rightmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
The grey element, a div with id of #banner is not meant to be sticking out, I gave all the elements inside the div containing the welcome to fusion box, red element, and banner a min-height which adds up to all the min-heights of the elements inside it (welcome to fusion cube, red element, banner).
Basically it's not meant to stick out and I just can't figure out why it is sticking out.
JsFiddle
Not really something productive to ask but I can't figure it out and it's stressful
#main-wrapper{
width: 80%;
height: calc(75.5% - 10px);
margin: 10px auto 0;
min-height: 250px;
}
#page-title {
height: 7%;
font-size: 1.8em;
text-align: center;
padding: 1px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 35px;
}
#content-wrapper {
background: red;
height: 83%;
min-height: 160px;
}
#page-messages {
width: 100%;
height: 20%;
overflow: auto;
}
#banner {
height: 10%;
display: inline-block;
background: grey;
min-height: 55px;
}
footer {
height: 8%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5%;
margin: 20px 0 0;
width: 100%;
display: block;
}
you defined #banner as an inline-block - is that intention? (= not spanning the whole width?). Your fiddle looks quite different from the screenshot you posted...
try making its position: absolute and bottom: 0px;, and give the parent element (#main-wrapper) position: relative, and also a margin-bottom as high as #banner, which prevents content to be hidden by #banner.
(edited, wrong name for parent element)
I'm not sure I can explaint clearly what is the problem, so please be understanding.
I have this HTML code:
<div id="container">
<div id="navbar">
...
</div>
<div id="content">
...
</div>
</div>
Here is the CSS code:
#container {
display: block;
width: 640px;
height: 480px;
}
#navbar {
display: block;
position: fixed;
width: 640px;
height: 70px;
}
#content {
display: block;
marign: 70px 0 0 0;
width: 640px;
height: 410px;
overflow-y: auto;
}
It works fine on desktop and any Android-base browser, but in iPhone's Safari... When I zoom in on this page the content works fine, but the fixed element stay on position relative to screen. Every other element moving fine.
What is the problem? I don't have idea...
An element with fixed position is positioned relative to the browser window.
You should give top: 0; and/or left:0 etc
try on this code http://jsfiddle.net/nandhakumarsri9/bkwLG/
#container {
display: block;
width: 640px;
height: 480px;
border: 1px solid #000;
box-sizing: border-box;
position: relative;
}
#navbar {
display: block;
position: absolute;
width: 640px;
height: 70px;
border: 1px solid #F00;
box-sizing: border-box;
}
#content {
display: block;
width: 640px;
height: 410px;
overflow-y: auto;
border: 1px solid #00F;
box-sizing: border-box;
position: absolute;
top: 70px;
}
Most of mobile browsers have problem with fixed positioning. Try to use jQuery mobile framework with data-position="fixed" attribute.
I have a parent div (main) with the horizontal overflow set to auto. I then have a child element (columns) that has all of my column properties on it. The problem is that once the content goes further than the viewport I can no longer control the right hand margins or padding as the column only seems to go as far as the viewport. For example when I put a background color on "columns" the background only goes as far as the edge of the viewport even though the content scrolls further than that.
.main {
overflow-x: visible;
overflow-y: hidden;
width: 100%;
}
.columns {
background: red;
column-fill: auto;
column-width: 670px;
column-gap: 80px;
height: 120px;
padding: 20px;
width: auto;
}
<div class="main">
<div class="columns">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
Here is an example: http://jsfiddle.net/fyG24/
New Answer: Use Pseudo-Elements to Help
Based on your comments, here is new the fiddle that I believe meets your desires. It adds an extra div wrapping .columns I labeled .scroller, and the following css:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.main {
background: yellow;
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
.main:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 120px; /* match columns */
background: red;
z-index: 0;
}
.scroller {
overflow-y: hidden;
overflow-x: auto;
height: 100%;
position: relative;
z-index: 1;
}
.columns {
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
height: 120px;
padding: 0 20px;
text-align: justify;
width: auto;
}
.columns > p:last-of-type:after {
content: '';
display: block;
width: 20px;
height: 1px;
float: right;
margin-right: -20px;
margin-top: -1px;
}
I use a pseudo-element in .main to give the background for .columns set to the explicit height you intend for those, then I also use another pseudo-element in the last p to force rendering the final 20px of the column. It should work no matter how long or what part it takes up, and at height: 1px and margin-top: -1px it should not generate a new column if it falls right at the end of a column of text.
Original Answer: Move Overflow and Set a Right Margin
To get the background to transfer, you need to change some CSS, namely:
.main {
overflow: hidden;
width: 100%;
}
.columns {
overflow-x: auto;
}
This seems to be because the .column background is being limited by the 100% width on the .main which is in control of the horizontal scroll bar in your original code. By making .main purely hidden, then setting overflow-x: auto on .columns, the scroll is now controlled by the .columns div, and allows its background to be seen.
To fix the absence of padding on the far right side, the only think I could come up with was to add the following:
.columns > p:last-of-type {
margin-right: 20px;
}
This puts a right margin on the last p element of the immediate children of .columns which then gave the look I assume you are going for.
Here's the fiddle modified (tested only in Firefox).
I achieved better results just by dividing up your columns css as follows:
.columns {
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
height: 120px;
}
.columns p {
background: red;
height: 120px;
padding: 0 20px;
text-align: justify;
width: auto;
}