Take a look at my page here:
REMOVED
I have a big red div taking up the entire content area. I plan on having it stretch across the entire page horizontally. I'm going to be using a carousel effect to allow my clients to sign up for an appointment one step at a time. The div is a child of another div but I need it to be wider than it. The center content area is a static width and is centered with margin:auto;. Is there a way to make my child div as wide as the whole page while hopefully only using css?
**<div id="servicesteps"> </div>**
is the red div just remove it from your <div clas="shadow" id="content">
and put it above footer div and it should work
your final body tag will look something like this
<div id="header"><div id="headpadding"></div><div class="headbutton noselect">Home</div><div class="headbutton noselect">Services & Pricing</div><div class="headbutton noselect">service details</div><div class="headbutton noselect">Request Service</div><div class="headbutton noselect">Contact</div></div>
<div id="content" clas="shadow"><div class="noselect" id="logo"></div><div id="buttonarea"><a style="display:table-cell;" href="details.html"><div class="noselect greenbutton"><span class="buttontitle">GET THE DETAILS</span>Learn about what we do before you come over!</div></a><span style="width:51px;display:table-cell;"> </span><a style="display:table-cell;" href="get.html"><div class="noselect bluebutton "><span class="buttontitle">REQUEST SERVICE</span>Get your computer serviced in the next 48 hours!</div></a></div><!-- InstanceBeginEditable name="content" -->
<div class="fold noselect"><span style="background-color:#4F69FF;">Request Service</span></div>
<table id="currentstatus">
</table>
<!-- InstanceEndEditable --></div>
<div id="servicesteps">
</div>
<div id="footer">Dade Lamkins (DadeFixMyComputer.com) Copyright 2011.</div>
If I understand correctly, you would like something to stretch all the way from one side to the other. This is what I would do:
width: 100%;
That should work with your problem.
Related
I'd like to make my table go full width (prior to my table my content is restricted next to three blocks which I'm cool with).
The table appears after the words "A selection of awards won:"
You can see the page - here
Would this be possible with inline css?
Thanks,
Sam
The best solution is removing your table from the:
<div id="right">
And creating a new div bottom or something with 100% width under the div right/ div left.
<div id="bottom" style="width: 100%"><table>
This should fix your problem,
You can't go full width because your container .sub-content is not full width...
If you want to go full width you will have to put your table in another container that is at the same level as the .left and .right container but with full width.
Something like :
<div id="content-sub">
<div id="left">...</div>
<div id="right">...</div>
<div id="bottom">
<!-- Your table goes here -->
</div>
</div>
with :
#bottom{
display: block;
width:100%;
}
Simply copy your your table code out and place it just above this code
<br clear="all" />
<div id="footers">
I am trying to create a layout here which looks like the following: Here's the fiddle
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
This is the content section
</div>
<div class="stream-content">
This is the stream content.
</div>
<div class="push">
</div>
</div>
<div class="footer">
</div>
<body>
I want the content section to take up the full space between the header and footer section. There is an additional section called [stream-content] which if there (will be there only on home page) has to take the position just before the footer. And in that case, the content section should take up space all the between header and stream-content section. I tried doing the same with absolute positioning but all my elements were going haywire, so wanted to understand the correct way of doing this. Thanks in advance for all help!
Add position:relative to your wraper class.
Add position:absolute;bottom:0; to the stream-content class.
Check it here.
Fiddle
If I understand correctly then one way to do it would be to put [steam content] outside the wrapper, as wrapper is the one that is keeping the footer at the bottom. If you must have the [steam content] inside wrapper than you can try something like this http://ryanfait.com/sticky-footer/ to keep it at the bottom together with the footer
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.
The question may sound a bit... stupid. But I'm kinda stuck.
I'm using Twitter Bootstrap. My test code is :
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background:#eee; border:1px solid blue;">
<ul class="nav nav-list">
<!-- List contents -->
</ul>
</div><!--/span-->
<div class="span9" style='background:#fff; padding-left:10px; border:1px solid red'>
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website...</p>
<p><a class="btn btn-primary btn-large">Learn more ยป</a></p>
</div>
<div class="row-fluid">
<!-- The content -->
</div><!--/row-->
</div>
</div>
</div>
And this is what it looks like (I'm using colored borders to show you WHERE each of the 2 divs is) :
Now, my question is :
Is there any way I could have the second, red-bordered, div (span9) occupy THE WHOLE rightmost column (without any margins around it), so that the final result looks like :
the Control Panel on the left (a whole column with with that gray-ish background)
the right-most div on the right (occupying all of the remaining space, with a white background)
I don't have much experience with twitter bootstrap, but I'm assuming that the answer would be to look at the css properties for your 'row-fluid' class and check the margin and width.
margin: 0 auto; will give remove any margin (space around the outside of the div) and center it in the container
if ^ is already true, width=50%; (if you're going to have both side by side)
Hope that helps!
I'm in a little bit of a pickle. My page doesn't end with my footer, as it would normally do. Instead, there is a lot of "body background" going on after all my divs end, while I would really like the scroll to end with the bottom of the footer.
I am not entirely sure, but this effect may have to do with my page menu, which uses text and jpg with a lot of hover (on the active page it has a height of 350px, on Dreamweaver's layout however it is about triple that height, due to all the jpgs which are listed.
My question: Is there a way to make the page "end" with the last div, the footer? As the whole html is a little too much, here's my basic layout:
<body>
<div class="backgroundofwholepage">
<div class="menu">
<!--contains a few other divs for the menu-->
</div>
<div class="content">
<!--contains a three column div structure, based on float-->
<br class="clearfloat">
<!--contains clear:both-->
<div class="footer">
</div>
</div>
</div>
</body>
If any of you have an idea, I'd much appreciate your help!
ACME
You either want a sticky footer (putting your footer at the bottom of the page for sure) or you want to put a background on your html element so that the body background doesn't fill the window.
html { background:white }
body { background-image:url( ... ) }
For example, see: http://jsfiddle.net/vRBZM/