I am new to HTML/CSS. I want a horizontal strip of the screen to be black, on a red background. Using CSS, I define a wrapper with a black background and a body with a red background.
Unfortunately, when there's a horizontal scrollbar, the wrapper only takes up the part of the page that can be seen with the scrollbar at the extreme left. The area of the page to the right of this is entirely red.
Here is the relevant HTML and CSS:
<div id="wrapper">
<div id="page" class="container">
<div id="content">
<h2 class="title">Foo</h2>
<div class="Body">
<p>Bar</p>
</div>
</div>
</div>
</div>
#wrapper {
background-color: #000000;
}
.container {
width: 1000px;
margin: 0px auto;
}
#page {
padding-top: 280px;
}
#content {
float: left;
width: 620px;
padding-right: 40px;
}
body {
margin: 0;
background: #FF0000;
}
you need to specify the minimum width for div #wrapper
#wrapper {
min-width: 1000px;
}
Related
First of all, please look at this code.
I learned that this was a common way to realize liquid layout.
But I can not understand some of this code.
.container {
overflow: hidden;
}
main {
float: left;
width: 100%;
margin-right: -340px;
background: red;
}
.main-inner {
margin-right: 340px;
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Question 1
I understand that the negative margin has the effect of moving an element in the specified direction. However, when you run this code, the main element does not seem to be moving at all. Why is this?
Question 2
Since we set the width of the main element to 100%, I understand that the aside element hits the main element and that the main element and aside element can not be side by side.
So, I think that we prepare a horizontal width that can apply the aside element by applying negative margin, but the background color of the main element is applied in the same way as when the horizontal width is 100%. Why is the background color of the main element not (100% - aside width)? How is this series of rendering done?
Question 3
Which document on W3.org describes these actions? I tried looking, but I could not find any detailed information on them.
thank you.
Let's start by adding the properties one by one and see what is happening.
Intially we have this code with no margin applied and only float elements:
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
It's clear that you made the red element to be width:100% floating on the left and the green one to float on the right with a fixed width. You may also notice that p element is having a default margin that's why the blue is not totally covering the red.
Now if you add negative margin-right you will not move the element or decrease the width but you will pull the content from the right in order to overlap the element. Here is a basic illustration:
.box {
width: 200px;
height: 200px;
background: red;
float: left;
}
<div class="box" style="margin-right:-100px;height:220px">
</div>
<div class="box" style="background:blue;">
</div>
As you can see the blue box is overlapping the red one by exactly 100px because we applied -100px to the margin-right of the red box. Same logic will happen in your case, you applied a negative margin equal to the size of the sidebar so you created the need space to move the sidebar at the same level of the main element.
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
So the main element is still 100% width BUT the sidebar is overlapping it due to negative margin.
Now the last step is to add the margin inside the main and in this case it will reduce the width of the inner element to make the total (width + margin) always equal to the width of parent element (containing block)
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
margin-right:340px;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Here is another illustration of margin with block element non floated:
.container {
border: 2px solid;
max-width: 50vw;
margin: auto;
}
.first {
height: 100px;
background: red;
margin: 0 -50px;
}
.second {
height: 100px;
background: blue;
margin: 0 50px;
}
<div class="container">
<div class="first">
</div>
<div class="second">
</div>
</div>
In this case the width is increasing/decrasing due to margin because the logic is always: width + margin = width of containing block.
With elements like float and inline block the logic is the same but we won't have width changes because the width is defined either by the content or explicitly.
.container {
border: 2px solid;
display:inline-block;
}
.first {
float:left;
height: 100px;
background: red;
margin-right:-50px;
}
.second {
display:inline-block;
width:200px;
height: 120px;
background: blue;
margin-top:20px;
margin-right:-100px;
}
<div class="container">
<div class="first">
some text here
</div>
<div class="second">
</div>
</div>
Here the float element has a width defined by the content, the inline-block has a width equal to 200px. The negative margin is creating the overlap and the size of the parent element (the containing block) is equal to width + margins.
For the references:
8 Box model
9 Visual formatting model
10 Visual formatting model details
The above explanation is very simplifed. Refer to the specification links for a full and details explanation.
The odd placement from <main> comes from a browser css-rule
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
You can reset it using a css reset like normalize.css.
However, I recommend using display: flex. Some wonderful resources.
.container {
display: flex;
}
main {
width: 75%;
}
aside {
width: 25%;
}
I have Googled this and tried all they suggested and it doesn't seem to be working.
I am making a template - so it all has to be in one HTML file. I am guessing something is screwy with my CSS that I'm just not catching... I've scanned it several times though.
Picture of problem (I want the white to extend to the bottom of the page; even if there isn't enough content):
CSS (there is more, but I figure these are the only ones that matter):
html, body
{
padding: 0px;
min-height: 100%;
margin: auto;
background-image: url("http://www.pixieduststudio.net/images/stripes.png");
background-repeat: repeat;
}
#wrapper
{
width: 80%;
margin: auto;
background-color: transparent;
}
#navbar
{
background-color: white;
text-align: center;
width: 100%;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
display: block !important;
margin: auto;
height: 75px;
}
#sidenav
{
width: 20%;
float: left;
border-bottom-left-radius: 5px;
border-right: 1px solid pink;
background-color: white;
}
#content
{
padding: 25px;
width: 80%;
float: left;
background-color: white;
margin: auto;
}
#content #pageTitle
{
margin: 0;
padding: 25px;
letter-spacing: 3px;
}
#pageContent, img
{
width: 80%;
}
HTML
<div id="wrapper">
<div id="navbar" class="navbar navbar-default" role="navigation">
<ul id="nav">
<!-- LINK ARE HERE BUT I REMOVED THEM -->
</ul>
</div>
<div id="sidenav">
<div id="socialBar">
<img src="http://www.pixieduststudio.net/images/facebook.png">
<img src="http://www.pixieduststudio.net/images/Instagram.png">
<img src="http://www.pixieduststudio.net/images/EmailUs.png">
</div>
<div id="shopBar">
<img src="http://www.pixieduststudio.net/images/shoppen.png">
<hr class="section">
<figure>
<img class="icon" src="http://www.pixieduststudio.net/images/bag.png">
</figure>
<img src="http://www.pixieduststudio.net/images/shopinfpen.png">
<hr class="section">
<div class="sidelinks">
<li>Meet Pixie</li>
<li>Shipping</li>
<li>Site Map</li>
<li>Order Tracking</li>
<li>Guest Chat</li>
</div>
<img src="http://www.pixieduststudio.net/images/searchpen.png">
<hr class="section">
<p style="margin: 25px;">%SEARCH_SITE%</p>
</div>
</div>
<div id="content">
<img id="pageTitle" class="img-responsive" src="http://www.pixieduststudio.net/images/headertitle.png" />
<hr>
%CONTENT%
<!--<p id="pageContent" style="padding: 25px;">
<img src="http://www.pixieduststudio.net/images/camp.png">
</p>-->
</div>
<div id="foot">
<!--<img src="images/footer.png">-->
</div>
</div>
You have to move background-color: white; to #wrapper, which is the container of both the content and the sidebar, to make the full box bg white.
Change #sidenav and #content to display: inline-block rather than float: left to allow #wrapper to adjust to the height of its contents. Add vertical-align: top so they will properly top-align to eachother.
#wrapper
{
width: 80%;
margin: auto;
background-color: white;
}
#sidenav
{
width: 20%;
display: inline-block;
vertical-align: top;
background-color: white;
}
#sidenav .nav {
border-bottom-left-radius: 5px;
border-right: 1px solid pink;
}
#content
{
padding: 25px;
width: 80%;
display: inline-block;
vertical-align: top;
margin: auto;
}
You'll also have to get rid of the 1px right border on #sidenav, which will make the contents of #wrapper add up to more than 100% of its with (and therefore wrap).
Change your sidenav content to:
<div id="sidenav">
<div class="nav">
...
</div>
</div>
In order to fix this, you can change the height of your container to use the vh unit
In your css, set the height of your main content container to:
#content
{
height: 100vh;
}
This will set the height of the container to 100% of the browsers vertical height in the viewport, please note this may have compatability issues with older browsers.
In the case of your problem, you will also need to set the parent elements height to 100vh too, this is because the child element (your main content) will fit to 100% of its parents height, which doesn't fit the whole page, to fix this, add the following to your css:
#wrapper
{
height: 100vh;
}
The child elements will now be able to fill the entire screen.
Consider the following example...
CSS
html,
*
{
border : 0;
box-sizing : border-box;
margin : 0;
padding : 0;
}
#wrapper
{
background-color : red;
display : flex;
min-height : 100vh;
}
#col-1
{
background-color : blue;
display : block;
float : left;
width : 25%;
}
#col-2
{
background-color : yellow;
display : block;
float : left;
width : 75%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0"
>
<link href = "CSS/Example.css"
rel = "stylesheet"
type = "text/css"
>
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id = "col-1">
<p>Column1</p>
<p>Column1</p>
<p>Column1</p>
</div>
<div id = "col-2">
<p>Column2</p>
</div>
</div>
</body>
</html>
The * section in the CSS file gets rid of any default borders, margins and padding for all elements unless they are subsequently specified. The box-sizing : border-box; line makes sure that any borders, margins and padding are contained within the specified width and height, which makes laying out a page much easier.
Please visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for an explanation of flexbox.
Applying this structure to your page should solve the specified problem nicely.
If you have any questions, then please feel free to reply.
First question so sorry if this is a bit squiffy.
I'm trying to get a full (100%) width fixed header with content within, such as logo and navigation links, that is aligned to the main container. I'd like to do this without the use of margining left or right on the logo/nav content as that doesn't seem particularly flexible.
I tried putting the header div within the container block, that fixes the alignment issue but then I can no longer go full width.
So basically how do I get content in a full width fixed header to align with content in the main content of the page?
Here is my html (sorry if its messy, I've only been at this a week or so):
<body>
<div id="header">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Here is my CSS, I left the logo image out and in place is just a beige block:
body {
margin: 0px;
background-color: darkgray;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
width: 960px;
margin: 0px auto;
height: 1000px;
background-color:gray;
}
#footer{
width: 100%;
height: 100px;
background-image: url("images/bg-header.jpg");
}
Any advice?
Thank-you
Add an inner wrapper to your header HTML
<body>
<div id="header">
<div id="header_inner"><!-- inner div -->
<div id="logo">
</div>
<div id="nav">
</div>
</div><!-- end inner div-->
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Then add the same width styling as your container to the wrapper:
#header_inner{
width: 960px;
margin: 0px auto;
}
Then the main content and your header content will align.
Some side notes:
classes are always better than IDs for styling
fixed width are generally not a great idea if you're going for a responsive solution
For Fixed Header or Footer you can use
.header_class {
width: 100vw;
float: left;
position: fixed !important;
top: 0px;
background: url: ('images/img.png') no-repeat;
height: 100%;
}
another better suggestion you can follow facebook header css means upper blue section css (css class name: .fixed_elem, .fixed_always)
I had a little trouble understanding what exactly you were looking to do so I made this example which shows a full page with header and one contained within the middle content area. The main problem I saw was that when you do things like width:100% it doesnt do 100% it is allowed.. but the full width of the parent element. You can use width:inherit to get the max width allowed. Here is the example with a full white header width and one contained using black. Its all in how you structure the parent child DOM relationship structure
<!doctype html>
<html>
<head>
<style>body {margin: 0px;background-color: darkgray;}
header{background-color: white;height:100px;width:100%;}
#header{width: inherit;height: 100px;position: fixed;top: 0px;background-image:url("images/bg-header.jpg");opacity: 0.9;background-color: black;}
#logo {height: 100%;width: 300px;background-color: beige;}
#container {width: 960px;margin: 0px auto;height: 1000px;background-color:gray;}
#footer{width: 100%;height: 100px;background-image: url("images/bg-header.jpg");}
</style>
</head>
<body>
<header><div></div></header>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="nav"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
The easiest solution is to add a container inside the #header. Create a class .container that has the properties shared by the #container and this container. Also make sure that the container inside the #header gets 100% height.
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
body {
margin: 0;
background-color: darkgray;
}
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background-image: url("http://placehold.it/100x100");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
height: 1000px;
background-color: gray;
}
#footer {
height: 100px;
background-image: url("http://placehold.it/100x100");
}
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
<div id="header">
<div class="container">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
</div>
<div id="container" class="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
Basically you want to have a full width 100px header and footer which are fixed to top 0 and bottom 0. but at the same time you want the content to not exactly roll under the header and footer. I hope I understood the question here.
To achieve that obviously give position fixed to header and footer but now to get your content aligned right, you have to give a margin of the height of header and footer ( 100px)
Here is the code snippet... I have added different colors and some filler content to see the difference.
body {
margin: 0px;
background-color: darkgray;
}
#header,
#footer {
width: 100%;
height: 100px;
position: fixed;
left: 0;
background: blue;
opacity: 0.5;
text-align: center;
color: red;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
float: left;
}
#nav {
height: 100%;
width: 450px;
background: cyan;
opacity: 0.5;
float: right;
}
#container {
width: 960px;
margin: 100px auto;
height: 1000px;
background-color: orange;
}
<div id="header">
<div id="logo">logo</div>
<div id="nav">nav</div>
</div>
<div id="container">
<div id="content">
content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>
</div>
</div>
<div id="footer">footer</div>
Hope this was what you were looking for.
I've had this problem many times before, where you want full width images, but they're in containers at a fixed width. At any rate there's a few things you can do here. You can add a container class to every section you want in a container; You put a mini-container in divs you want to break the rules, (this also requires taking said div / #header out of the main #container)
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
Than put a div inside of that called content, and set content up like this.
.content {
width: 960px;
margin:0 auto;
display:block;
}
So your markup/html should look like
<div id="header">
<div class="content">
<ul>
<li><a>Home</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
There are more options, but these seem to make sense for this issue.
Hope This Helps,
-Alex
I'm pretty proficient in CSS and HTML but I just can wrap my head around how this will work correctly.
I want to have a width of 990px for the container but i have about 1237px width of due to added shadows to the left and right
ive got it positioned but i want the overflow to be hidden until 990px width...
is there a way to make this happen?? here is my current code.
CSS:
body, html {margin:0; padding:0;}
body {background:url(../images/bg-x.jpg) top center repeat-x; background-color:#000;}
#main-wraper { }
#main-container {margin:0 auto; width:990px; background:url(../images/container-bg.jpg) no-repeat; height:660px;}
#main-left {background:url(../images/bg-left.jpg) left center no-repeat;}
#main-right {background:url(../images/bg-right.jpg) right center no-repeat;}
#shadows {width:1237px; margin:0 auto; overflow-x: hidden}
html:
<body>
<div id="shadows">
<div id="main-left">
<div id="main-right">
<div id="main-wraper">
<div id="main-wraper-liner">
<div id="main-container">
<div id="main-container-liner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is the link
http://hithouse.businesscatalyst.com/index.html
thanks in advance.
If I got you right, you don't want the shadow to be displayed, when the screen is smaller than 990px. What I would do is this:
leave the body as it is
create a transparent png with a height of 1px and a width of 990px + shadows (left and right)
use this much simpler markup
you're ready to go
HTML
<div class="content">
<div class="shadow"></div>
<h1>Normal content goes here</h1>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div.content {
position: relative;
width: 400px;
height: 100%;
margin: 0 auto;
border: 1px solid red;
}
div.shadow {
position: absolute;
top: 0;
left: -28px;
width: 456px;
height: 100%;
background: transparent url(https://dl.dropbox.com/u/1336931/_Stackoverflow/example_shadow.png) repeat-y 0 0;
}
DEMO
Try before buy
Hi Guys I have this site:
http://www.ryansammut.com/orijen/
Basically so far I managed to make the top part strech as a background, now I need to make the other parts too. I'm not sure how to do it, so I'm asking for ideas how this would be done best, keeping the positioning all relative and the background image would adjust according to the needed content area.
PS. This is only needed for resolutions greater than 1280px, so zoom out if you need to see what's happening.
You can not stretch those elements because they are contained in a div named 'wrapper', which has a maximum width of 1280px.
add the following properties to : header, contentbackground, and footer:
margin-left:auto;
margin-right:auto;
this will make sure the elements are centered.
then remove the width property from #wrapper, and add the background to it so it reads as follows :
#wrapper {
position: relative;
margin: 0 auto;
top: 0px;
padding: 0px;
background-image: url(../images/contentBG.png);
}
However, now we won't see the horizontal stretch of the header anymore, so we need to move #header above #wrapper.
<div id="header">
...
</div>
<div id="wrapper">
...
</div>
Don't use tables, use DIVs only.
No need to include FlowPlayer script two times.
I dont see you use JQuery (no need to include that).
Replace Dreamweaver's rollover images with proper CSS:
.item {background: image.jpg}
.item:hover {background: image_rollover.jpg}
Get sprite images (you can read here: http://css-tricks.com/css-sprites/)
As the original question... you have to use two DIVs for each "row", like this:
#header_wrapper {
float: left;
width: 100%;
background: header_backgroud.jpg;
}
#menu_wrapper {
float: left;
width: 100%;
background: menu_backgroud.jpg;
}
#content_wrapper {
float: left;
width: 100%;
background: content_backgroud.jpg repeat center top;
}
.wrapper {
margin: 0 auto;
width: 1260px;
}
<div id="header_wrapper">
<div class="wrapper">
--- header content ---
</div>
</div>
<div id="menu_wrapper">
<div class="wrapper">
--- menu content ---
</div>
</div>
<div id="content_wrapper">
<div class="wrapper">
--- page content ---
</div>
</div>
You need to change the structure to something like this:
<div id="header">
<div>
<ul>Nav</ul>
</div>
</div>
<div id="mainContent">
<div>Content</div>
</div>
<div id="footer">
<div>Content</div>
</div>
Then the CSS could look something like this:
div#header { width: 100%; background: black; }
div#header div { width: 600px; margin: 0 auto; background: url(...); }
div#mainContent { width: 100%; background: url(...); }
div#mainContent div { width: 600px; margin: 0 auto; }
div#footer { width: 100%; background: black; }
div#footer div { width: 600px; margin: 0 auto; }
It is fast written, hope you can see the idea? I can't see why you would go with position absolute or relative. Use margin: 0 auto; to center divs instead :)