I have this problem where one element is floated and I cannot set a padding to the other element on the same line because it appears in the beginning and not where I want it to.
FIDDLE
HTML
<header>
<h1>John Doe</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Game</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class='body'>
<section class="body_heading">
<h2>About Me</h2>
</section>
<aside>
<section>Lorem ipsum</section>
</aside>
<section class="body_content">lorem ipsum</section>
</div>
CSS
html, body {
min-height: 100%;
}
body {
background: #f1f1f1;
}
header {
background: #CAE5FF;
float:left;
height: 100%;
color: gray;
}
header > * {
padding: 5% 15%;
}
header > nav {
}
header > nav > ul {
list-style: none;
padding: 0;
margin: 0;
}
header > nav > ul > li {
}
.body {
padding: 1%;
}
aside {
float: right;
}
The problem is between the header and the .bodyelement I want to be a little space but padding doesn't affect it.
Use below Options
.body{overflow:hidden;} /* or */
.body{margin-left:125px;} /* width of left contents + 10 or 20 for some space */
The padding of 1% that you have specified on the div.body is working perfectly fine.
The problem lies in the fact that the header is floated and does not have a width. Also, the div.body is not floated. So, the div.body takes up all the width while the content gets shifted because of the left floated header.
This can be seen here: http://jsfiddle.net/2fyqqwjx/1/
See the green border of div.body ?
A very simple solution (with your current markup) would be to give a width to the header and provide an equivalent margin-left to your div.body:
* { box-sizing: border: box; }
html, body {
height: 100%; overflow: hidden;
}
header {
float: left;
height: 100%;
width: 20%; /* give a fixed width here */
}
.body {
padding: 1%; margin-left: 20%; /* give a margin-left equivalent to header width */
}
See this demo: http://jsfiddle.net/uc0rh9d0/1/
.
.body{padding-left:35% //whatever you want }
Give float:left; to .body it will be enough
Add margin-right to your header in CSS.
Here is the example
header {
background: #CAE5FF;
float:left;
height: 100%;
color: gray;
margin-right: 10px;
}
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 8 months ago.
I am trying to create a hero box but my herobox and navbar have white space inbetween. I can not get rid of it! I am guesing it has to do with flexbox and/or grid but i'm not sure.
I colored the nav purple and the herobox blue to try to figure why they don't follow each other. I tried messing with the margin and display in CSS.
Chrome inspection of elements:
My code so far:
body {
font-family: sans-serif;
margin: 0;
}
main {
margin-top: none;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
.topnav {
overflow: hidden;
background-color: blueviolet;
}
.left {
padding: 20px;
float: left;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: left;
}
.right {
padding: 20px;
float: right;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
#media screen and (max-width: 800px) {
.left,
.right {
width: 100%;
/* The width is 100%, when the viewport is 800px or smaller */
}
}
/*HERO BOX*/
.hero {
background-color: aqua;
}
h1 {
font-size: 15vw;
}
<header>
<!--NAVIGATION BAR-->
<nav>
<div class="topnav">
<div class="left">
<a href="#Coupons">
<p>Coupons!</p>
</a>
</div>
<div class="right">
<a href="#Order">
<p>Order Online!</p>
</a>
</div>
</div>
</nav>
</header>
<main>
<div class="hero">
<h1>Super Restaurant!</h1>
<button>View our menu!</button>
</div>
</main>
Solution
Set the h1 to margin-top: 0.
Explanation
The h1 has a margin-top that is creating the space with the header section.
This is happening because, even though the h1 is a descendant of the main element, its top margin is superseding the top margins of its ancestors (.hero and main).
And this is happening because of the rules of margin collapsing.
ยง 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin.
Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse, except [in certain cases].
Horizontal margins never collapse.
The top margin of an in-flow block element collapses with its first
in-flow block-level child's top margin if the element has no top
border, no top padding, and the child has no clearance.
It appears that the margin top on the header is causing the problem. try giving it a margin of 0 and giving it padding if you need and see what happens
h1 {
font-size: 15vw;
margin-top: 0;
}
Extra margin is from h1 (commented in code, info here).
Useful snippet for making completely own styling:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
Removes all margins and padding and also makes all elements same box-sizing.
Also, for example, re-create nav using grid styles, try to avoid float in positioning of elements, its intended for positioning images in text or etc.
body {
font-family: sans-serif;
margin: 0;
}
main {
margin-top: none;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
.topnav {
overflow: hidden;
background-color: blueviolet;
display:grid;
grid-template-columns:1fr 1fr;
}
.left {
padding: 20px;
place-self: center start;
box-sizing: border-box;
text-decoration: none;
}
.right {
padding: 20px;
place-self: center end;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
#media screen and (max-width: 800px) {
.topnav{
grid-template-columns:1fr;
}
}
/*HERO BOX*/
.hero {
background-color: aqua;
}
h1 {
font-size: 15vw;
margin-top:0; /* fix */
}
<header>
<!--NAVIGATION BAR-->
<nav>
<div class="topnav">
<div class="left">
<p>Coupons!</p>
</div>
<div class="right">
<p>Order Online!</p>
</div>
</div>
</nav>
</header>
<main>
<div class="hero">
<h1>Super Restaurant!</h1>
<button>View our menu!</button>
</div>
</main>
This question have been asked before I'm aware of, but unfortunately still haven't found a solution. Even though I tried using their solutions.
My problem is that I can't get rid of the default 8px margin on around the body/html tag. It looks like that it doesn't even respond to the changes I put in between the curly brackets.
Html:
<div class="header">
Header123
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PROJECT</li>
</ul>
</div>
<div class="main">
Article
</div>
<div class="footer">Footer</div>
CSS:
body,html {
margin: 0;
text-align: center;
background-color: blue;
}
.container
{
margin: 0;
background-color: red;
}
.header
{
text-align: left;
height: 90px;
background-color: green;
margin: 0;
}
.nav
{
float: right;
}
.nav ul
{
list-style: none;
height: 30px;
padding: 0px;
margin: 0px;
}
.nav ul li
{
margin: 10px;
}
.footer
{
height:40px;
}
Link: https://jsfiddle.net/RasmusGodske/yg2gsa0t/
For HTML:
<body style="margin:0;padding:0">
For CSS:
body {margin:0;padding:0}
Probably you are having a difficulty because margin and padding are two different things. You should try both and use the one that suits your needs.
You can read more about margin vs padding from here
Remember: margin is outside an element's border; padding is inside.
You need to set the padding of the body element to zero. (The margin of the body element is meaningless; it'd represent a space outside the browser window!)
As an aside, you don't need to set any CSS properties on the html element. body already contains everything that you'd want to set properties on.
You can directly remove the margin using:
body { margin: 0; }
I am trying to set up my page layout to take up 100% of the screen but am running into problems with content overflowing into the footer.
Here's the code for the first example:
HTML:
<div class="container page-container">
<div class="page-leftSidebar">
<div class="sidebar" role="complementary">
<h4>Widget Title</h4>
</div>
<main class="post-wrapper" role="main">
<section class="entry-content">
<p>This makes the entire page 100% height, but <code>.post-wrapper</code> is not for some reason.</p>
</section>
</main>
</div>
</div>
<footer class="siteFooter">
<p>Copyright 2015 Me.</p>
</footer>
CSS:
/* Generic */
html,
body { height: 100%; }
body {
background-color: #f3f3f3;
margin: 0;
padding: 0;
}
/* Containers */
.container {
margin: 0 auto;
width: 90%;
}
.page-container { min-height: 100%; }
/* Page Content */
.post-wrapper {
background-color: #fff;
min-height: 100%;
}
/* This is the row that will hold our two columns (sidebar and content) */
.page-leftSidebar {
width: 100%;
min-height: 100%;
}
.page-leftSidebar:after {
clear: both;
content:" ";
display: table;
}
.page-leftSidebar .sidebar { -webkit-background-clip: padding-box; }
#media (min-width: 60em) {
/* Page container */
.page-leftSidebar .post-wrapper {
-webkit-background-clip: padding-box;
min-height: 100%;
}
/* Left Sidebar */
.page-leftSidebar .sidebar {
float: left;
width: 19.25%;
}
/* Right Content */
.page-leftSidebar .post-wrapper {
float: left;
margin-left: 2%;
width: 78.75%;
}
}
/* Site Footer */
.siteFooter {
background-color: #2b303b;
color: #555555;
text-align: center;
padding-bottom: 50px;
padding-top: 50px;
}
/* FULL PAGE HEIGHT */
.container { min-height: 100%; }
.post-wrapper,
.page-leftSidebar,
.sidebar {
display: block;
position: relative;
height: 100%;
}
I got things kind of working here, but my .post-wrapper container is still not 100% height: http://jsfiddle.net/1re4vLq4/10/
However, the above example does work if there is a lot of content on the page: http://jsfiddle.net/1re4vLq4/9/ (Note: that both this and the above example are using min-height)
Then I got the entire page (including .post-wrapper) to be 100% height by using height instead of min-height: http://jsfiddle.net/9m1krxuv/4/
Changed CSS:
.container { height: 100%; }
.post-wrapper,
.page-leftSidebar,
.sidebar {
display: block;
position: relative;
height: 100%;
}
However, the problem with this is when there is a lot of content on the page, it overflows onto the footer (you can see this by making the result pane in JSFiddle smaller): http://jsfiddle.net/1re4vLq4/8/ Which shouldn't be the case (nor do I want to hide the text using overflow: hidden).
Any suggestions or ideas on how to go about fixing this? I'm looking for the entire page to be at least 100% height, including .post-wrapper (which is the right column with a white background).
If you have a "full-sized" container that you want to always match the height of the viewport - you're best not to add content that will overflow (go beyond) that div, as you're essentially defeating the purpose.
Short answer: Remove height: 100%; from your .container CSS rule.
I've created a basic Fiddle example combining full-viewport-height divs, and divs that just hold a lot of content.
HTML:
<div class="full-div red height-full">
<!-- Full sized div. Content should fit within the viewport -->
</div>
<div class="full-div blue">
<div class="inner-div">
<!-- Add long lorem ipsum here. -->
<!-- Notice that the parent div does not contain the height-full class -->
</div>
</div>
<div class="full-div green height-full">
<!-- This div will get "pushed down"only because the div above is NOT height 100% -->
</div>
CSS:
html,body{ height: 100%; margin: 0; padding: 0; }
.full-div { overflow: auto; }
.height-full { height: 100%; }
.inner-div { width: 90%; background-color: white; margin: 0 auto; }
.inner-div span { text-align: center; }
DEMO here: http://jsfiddle.net/175mrgzt/
Ultimately, when you set a DIV to 100% - its expected to be 100% of the viewport (graphical viewing region of the browser). Once you add content that extends that you're essentially going over 100% - and in that case, you might as well remove the set height, and let HTML make the adjustments for you.
I am doing something wrong here but what is it I am not being able to figure out. Is something wrong with my code? Whenever I try to make the screen size smaller the content must be fixed up to a certain width but it's adjusting itself and nothing is displayed beyond it. And here is the jsFiddle with the image of what is wrong below.
HTML
<div class="sitefeed">
<!-- this is the start of site -->
<header>
<div class="wrap head-rel">
<ul class="nav">
<li>Home
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
<ul class="logo">
<h1>Naveen Niraula</h1>
</ul>
</div>
</header>
<div id="main">
<article>
<div class="wrap">
<h1>This</h1>
<p>My dear has kinda some typo somewhere.</p>
</div>
</article>
</div>
<!-- and here is the end -->
</div>
CSS
* {
margin: 0;
padding: 0;
font-family: consolas;
}
html {
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
overflow: auto;
}
.sitefeed {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.wrap {
max-width: 901px;
min-width: 900px;
margin: auto;
padding: 0 5px;
}
/* ------------- header here ------------------- */
header ::-moz-selection {
color: #6cccf2;
}
header ::selection {
color: #6cccf2;
}
.head-rel {
position: relative;
}
header {
background: #3b5998;
color: #fff;
}
/* ----------- navigation goes right here ---------------- */
.nav {
list-style-type: none;
position: absolute;
bottom: 0;
right: 0;
}
.nav li {
display: inline-block;
}
.nav li a {
text-decoration: none;
color: #fff;
padding: 10px;
display: block;
}
.nav li:hover {
background: #000;
}
.nav li a:hover {
color: #fff;
}
/* ------------------------ main content goes here ------------------------ */
#main ::-moz-selection {
color: #a0249c;
}
#main ::selection {
color: #a0249c;
}
#main {
background: #e1e1e1;
}
I want it to display the whole content even when the viewport is small but if the viewport exceeds the webpage I want the background color to measure up to fill that space(left and right). Like the image below . But when I remove the width from .sitefeed it's not possible.
Solved.
It seems like table-layout:fixed; was causing the problem but now I fixed it!
Try taking the overflow:hidden out of your HTML style.
In this case when you work with the fixed width, just add this with to header and #main, which are both parents of .wrap with fixed width.
header, #main {width: 900px;}
http://jsfiddle.net/cj9pvz5o/
If I understand your question right, you don't want the following code:
.sitefeed { width: 100% }
If you remove this width, you get the background over the whole layout no matter if its outside of the viewport or not. Block elements (display: block) will always take as much width as they can, if not used in conjunction with float. I guess they same is true for display: table. This will take only 100% of the viewport and thus cut the background color at the point where the other content overflows.
Here is an updated jsFiddle: https://jsfiddle.net/nkwxw9gj/3/ Do you wanted to achieve this?
Note: the reason why it overflows from the viewport is your use of min-width: 900px within .wrap-rule. Change that in case you don't want to overflow for reasonable resolutions.
I have a simple page with header, footer and article tags. http://jsfiddle.net/6fmxv/
HTML:
<header>
<div class="social">
<a class="facebook-logo" href="http://www.facebook.com/">
<div id="facebook"></div>
</a>
<a class="youtube-logo" href="http://www.youtube.com/">
<div id="youtube"></div>
</a>
<a class="twitter-logo" href="http://www.twitter.com/">
<div id="twitter"></div>
</a>
</div>
</header>
<article>
<div>Question: Who are you?</div>
</article>
<footer>
<div>
<span></span>
<div>
</footer>
CSS:
html, body {
height: 100%;
margin: 0;
}
header {
height: 24px;
background-color: rgb(19, 147, 107);
}
header .social {
padding-left: 19%;
}
header .social > a > div, footer > div > span {
margin: 0 12px;
float: left;
height: 71px;
width: 50px;
background-image: url(sprites.png);
}
header .social > a > div#facebook {
background-position: -116px -141px;
}
header .social > a > div#youtube {
background-position: -62px -141px;
}
header .social > a > div#twitter {
background-position: -9px -141px;
}
article {
width: 300px;
min-height: 100%;
margin: 0 auto;
}
article > div {
font-size: 3em;
padding-bottom: 150px;
}
footer {
background-color: black;
height: 150px;
position: relative;
margin-top: -150px; /* negative value of footer height */
clear: both;
}
footer > div > span {
background-position: 147px -138px;
height: 133px;
width: 138px;
}
I am trying to make it fluid, such that:
Header sticks to top Done
Footer at bottom Done
There is no scroll bar even when the browser window is resized. Not Done
Article (one line) at the center of the page. Not Done
Please suggest, how to make the text at middle and make the page fluid (without vertical scroll-bar) in this scenario.
What browser support do you need? If you can drop IE9 and below, you can use flexbox:
http://jsfiddle.net/6fmxv/2/
There are a lot of different syntaxes you need to get cross browser support, but it is simple enough.
I'll not include the different syntaxes here, but you can look at the source code.
First you need to enable flexbox on the body, then tell it to use vertical orientation:
body {
height: 100%;
width: 100%; /* fixes bug in Firefox */
margin: 0;
display: flex;
flex-direction: column;
}
Then you need to tell the article to flex its size to take up the remaining space:
article {
flex: 1;
}
Now you just need to center the article. You need to set article to be a flexbox container and then you can add the following declarations to the article rule, to center both in the inline direction (horizontal) and block direction (vertical):
article {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
You need to make article a container, s if you center on the body element, it will also center the header and footer too.