How to extend a div's width beyond its wrapper? - html

I have a big div wrapper called <div class="pageWrapper"> for which its size is set to be 1000px.
Inside it I have a header that I want to be 100% of the screen and fixed.
How can I do it ?
I know that I could take off the header div outside the pagewrapper but I'm customizing a volusion template so to take it off would delete all the CSS that was originally set up.

Try the following and see if it works.
Here is Fiddle as created by François Wahl
width:100%;
position:fixed;
And it is always good if you post the code you have tried first.

Do you want something like Demo ?
HTML
<div class="pageWrapper">
<div class="header">Header</div>
</div>
CSS
body {
margin: 0;
}
.pageWrapper {
width:500px;
background:green;
height:500px;
margin:0 auto;
}
.header {
position:fixed;
width:100%;
top:0;
left:0;
right:0;
height:50px;
background: red;
}

Related

Is there a way to do 2 divs has the same height?

My CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
.wrapper{
width:80%;
height:100%;
min-height:auto
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background:red;
}
.wrapped-nav{
width:30%;
float:left;
background:green;
height:auto;
min-height:100%;
}
.wrapped-ent{
width:70%;
float:left;
background:blue;
height:auto;
min-height:100%;
}
My HTML
<body>
<div class="wrapper">
<div class="wrapped-nav">Nav
</div>
<div class="wrapped-ent"></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Example</div>
</div>
</body>
jsbin: http://jsbin.com/cefegifula/edit?html,css,output
When I enlarged the Ent div with those and this overcome the div Nav, a space is created as in the jsbin show, is there a way to do 2 divs has the same height?
create a class that has height and refactor your code so that both divs have it.
so instead of using 100% for both divs use vh, px, or em to your advantage.
I would write it so that you have something like this.
<div class="class1 heightfix">
</div>
<div class="class2 heightfix">
</div>
and then in your css write
.heightfix{
height: 70vh; // or px or whatever.
}
in other news never try to use <br/> in order to fix your spacing problems.

center a container in an elastic background environment

Please can you check this example website. if I read the code well (just had a sight) it's setup with tables with some javascript so that a centered container can always stay at the center, and that the body has got two fluid color backgrounds which expands according to the screen size.
I was attempting to reproduce something like this but just using css, I am quite sure I could but can't figure how. please could you give me some indication/document to read.
i have designed a simple structure here in Jsfiddle,have a look
MARK-UP::
<div class="wrapper">
<div class="head_wrapper">
<div class="left_head">left</div>
<div class="right_head">right</div>
</div>
<div class="body_wrapper">
<div class="left_body">left</div>
<div class="right_body">right</div>
</div>
</div>
CSS ::
.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}
You're just asking for horizontal centering, on a fixed-width container. This is easily done entirely in CSS. Simply set for your container (the element that wraps around your entire site):
.container {
width: 800px;
margin: 0 auto;
}
The "auto" will automatically even out the left and right margins (with no margin on top and bottom.)
[Edit: oops forgot a bit]
As for the blocks of colour, you can achieve this with a background image on your element, that's 1px wide and however tall you need. Just set it to repeat-x.
If your two sections have the possibility of having different heights, you can break it up, so that:
One container is full-width, and has the background colour. An inner container will then be fixed-width with auto margins as above;
Another container is full-width, and has the lighter background colour. An inner container will then be fixed-width with auto margins as above.
This means your code will be something like:
<div class="headercontainer">
<div class="header> This is my header </div>
</div>
<div class="maincontainer">
<div class="main"> This is rest of my copy. </div>
</div>
And your CSS:
.headercontainer { background-color: #222; }
.maincontainer { background-color: #444; }
.headercontainer .header,
.maincontainer .main { width: 800px;
margin: 0 auto; }
HTH :)

Background on the top and on the bottom

I've got some code:
<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
Container width is for example 900px.
At the #top i set a background using body.
But I can't use background in the #bottom becouse it will crashed when it will be wider eg 1080px(background will be seen only on the #container). How to do this?
edit1:
body
{
background-image: url("images/bg_main.png");
background-repeat:repeat-x;
}
#top
{
background-image: url("images/top_bg.png");
height:50px;
}
#container
{
margin: 0;
width: 1024px;
background:#fff;
}
#footer
{
background-image:url("images/bottom.png")
}
but it creates inside container (i need to create bottom bg outside container, when site wiill be wider)
edit2:
I think that I found an solution:
html{;background-image:url('images/bottom.png');background-repeat:repeat-x;background-position:left bottom;}, and then set div height as a bottom.png
Do you mean something like this?
html:
<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
</div>
<div id="footer"></div>
</body>​
and with the addition of the following css:
#footer
{
width:100%;
height:40px; //Or something else you'd like
background-color: yellow; //Or the image you want
}​
I suggest try placing your #bottom outside #container than, because within #container you can't raise your width more than that of #container.
Try this:
#container{
width:1024px; //or whatever
}
#bottom{
height:40px; //or whatever
width:100%;
background:url("images/bottom.png") repeat-x center;
}

Need parent <div /> to cover PART of a child <div /> using CSS

I am trying to produce a progress bar with a divider bar that separates sections. This divider bar (child <div/>) hangs below the progress bar (parent <div/>). Thus, I want the progress bar to cover all of the divider bar except for the part that hangs below.
Here is a very simplified representation:
<html>
<head>
<style>
body {
width:500px;
margin:0 auto;
}
#parent {
width:50%;
height:30px;
background-color: yellow;
}
#child {
width:1px;
height:50px;
background-color:black;
float:right;
margin-right:100px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
How can I get the yellow part of the progress bar to cover up the intersecting portion of the divider bar?
Here is an image representing what I'm looking for:
Thanks in advance!
dunno if i get this right, but why dont you just give the child element a margin-top? (and reduce the height of the child div)
http://jsfiddle.net/7SMuJ/
if that is not an option you'd need to rearrange the elements so you could use z-index
Setting a parent to position: relative will allow you to absolutely position the marker. Since they'd both then be appropriate types for z-index, I would take that route. Here's a jsfiddle:
http://jsfiddle.net/WXDZF/
Seems to be the cleanest solution. In this case you really are trying to position something, not push something up or down, so I would recommend staying away from using a margin in an inorganic way.
You could just set your overlay on another container
#parent {
width:50%;
height:30px;
}
.innerParent{
background-color: yellow;
width:100%;
position:absolute;
top:0;
left:0;
display:block;
height:30px;
}
#child {
width:1px;
height:50px;
background-color:black;
float:right;
margin-right:100px;
z-index:1;
}
markup
<div id="parent">
<div class="innerParent">
</div>
<div id="child"></div>
</div>
You have to switch the paramaters from child to parent and visa versa, see below.
#parent {
width:100px;
height:30px;
background-color: yellow;
}
#child {
width:50%;
height:30px;
background-color:black;
float:right;
}

Dynamically setting a absolute DIV with a Dynamic Height?

Please see the following: http://jsfiddle.net/GWJMf/
What I'm trying to do is have the TITLE fixed, not scroll. But the content scrollable.
Problem is, having a fixed title, makes it very hard to deal with the dynamic range of a title, which can have anywhere from 5 - 250 characters.
Is there a way to have the TITLE be fixed, not scroll, but have the height set based on the title length?
Is this possible w CSS? Ideas? Thanks
Not sure why you have all that extra styling. You don't need to style the h2 or any wrapping elements to have it expand based on the length of the text.
http://jsfiddle.net/xd7a4/
I'm not sure of the height you're desiring for the scrolling container however here I set it to 200px.
<h2>title</h2>
<div class="scroll">content</div>
H2 {
background-color: #FF0000;
}
.scroll {
height: 200px;
overflow: scroll;
overflow-x: hidden;
}
I think this will help :
<style>
.content {
position:absolute;
top:100px;
left:100px;
width:300px;
height:auto;
}
.title {
position:relative;
top:0px;
left:0px;
width:100%;
height:auto;
background:red;
color:#fff;
}
.text {
position:relative;
top:0px;
left:0px;
width:100%;
height:200px;
max-height:200px;
overflow:auto;
}
</style>
<div class="content">
<div class="title">title<br/>title...</div>
<div class="text">text text <br/> text text...</div>
</div>