I'm working on a centered layout with 960px of width. Within the wrapper I want a Slideshow, that is 100% of width (the browsers width).
How can I achieve this?
<div id="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
<div class="slider"> //100%
Slider-content
</div>
<div class="text"></div>
</div>
Thank you in advance... :-)
div.slider will already be 100% width, since block-level elements like div already expand horizontally to fill all their parent's space unless otherwise specified. This is going to be true for div.text as well.
If you are asking how to create the 960px centered wrapper, the techniques are pretty standard. Either:
div#wrapper
{
margin: 0 auto; /* horizontal margin set to "auto" pushes <div /> to center
width: 960px;
}
or
div#wrapper
{
left: 50%; /* put left edge at 50% */
margin-left: -480px; /* move left edge back by 480px = half width.
this makes the center of #wrapper match center of page */
position: absolute; /* position: absolute makes the left: 50% line work */
width: 960px;
}
You may want to look at ways of including the slideshow div outside of the wrapper div if the wrapper is to be 960px and the slideshow is 100% of browser width.
Typically, absolute positioning of the slideshow div inside the wrapper div won't affect the dimensions of its container (wrapper) div but you lose some control in centering the contained (slideshow) div.
I would suggest changing #wrapper to .wrapper so that you can reuse your wrapper class later down the page. Then, I recommend the following markup:
<div class="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
</div><!-- end .wrapper -->
<div class="slider"> //100% of browser viewport
Slider-content
</div><!-- end .slider -->
<div class="wrapper"> //960px
<div class="text"></div>
</div><!-- end .wrapper -->
The solution was very simple.
How to make a DIV, that is within a fixed width DIV, to be the width of the browser.
HTML:
<div id="wrapper"> //960px
<div class="slider"></div> //100% of browser width
</div>
CSS:
.slider {
position: absolute;
width: 100%;
left: 0px;
}
Related
I would like to be able to create a div that spans the entire width of the screen. The problem is, this should work along with Weebly's design system, which places it inside a div of fixed width.
The content is created as the following:
#main-wrap {
width:100%;
}
.container {
margin: 0 auto;
width: 960px;
position: relative;
}
<div id="main-wrap">
<div class="container">
{content}
</div><!-- end container -->
</div><!-- end main-wrap -->
Inside {content} is where Weebly does its magic and puts all your stuff. I tried to directly embed some code:
.wide {
position: absolute;
left:0; right:0;
width: 100vw;
background: #aaccff;
}
<div class="wide">
Test
</div>
But this did not work, and the wide div was wider than the screen, but only starts at the same left position as the content div.
Does anyone know how to get a 100% wide div inside of the container. I could also make container 100% wide, but then all of the Weebly widgets go the full length of the screen, and its not clear how I can modify the CSS To make them have fixed width.
Thanks!
It's because of that the parent has is relative positioned. So, remove position: relative; from element .container
I am looking for a way to align a nested div to the bottom of the parent div.
I do not want to use position: absolut:
#child {
position: absolute;
bottom: 0px;
}
This breaks my responsive design as content will start to overlap if the screen is resized. The paren container looks like this:
CSS
#parent {
position: relative;
}
HTML
<header id="parent" class="container-fluid">
<div id="overlapped-content" class="row">
... some regular content ...
</div>
<div id="child" class="row">
<div id="lower-intro" class="container-fluid">
... to lower content
</div>
</div>
</header>
If the screen is resized the overlapped-content will be overlaped by the child content.
Is there any alternative?
You can use min-height on overlapped-content or You can set it's height.
I seem to be having some trouble with 100% widths. I have 3 divs, header, content and footer which are relatively positioned. I have set a width of 600px on the header and a width of 100% on the content and footer. However if I resize the browser when I use the horizontal scrollbar the 100% width divs are cut off and don't go all the way across to match the 600px div...how can I fix this?
CSS
#header {
position: relative;
width: 620px;
}
#content, #footer {
position: relative;
width: 100%;
}
HTML
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<div id = "container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
#container {min-width:620px;}
See example: http://jsfiddle.net/calder12/xN2PV/3/
Point to note. min-width is not supported in IE6. I doubt this matters, if it does you'll need a different solution.
Set width to "auto" for #content and #footer. Divs, being block elements, will automatically consume 100% of the available width (sans margin if set) in their immediate parent element.
As such, if #content and #footer are contained within #header or any other explicitly sized element, then they will never be wider than the specified width.
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>
I am trying to build a module of span8 width and varying height. There is an image which will define the height of the div, and text that is positioned on top of the image. I am having trouble trying to figure out how prevent part of my image from being cropped when Bootstrap resizes the div.
In addition, I'm having trouble figuring out how to position my text boxes. I am trying to have two text boxes - one positioned at 0% vertical, and the second at 50% vertical.
<div class="row">
<div class="span12 promo">
<div class="content">
<div class="row-fluid">
<div class="topText span24">
Text positioned on the top half
</div>
</div>
<div class="row-fluid">
<div class="botText span24">
Text positioned on the bottom half
</div>
</div>
</div>
</div>
</div>
.promo { height: 100%; }
.promo .content { width: 100%; height: 100%; background:url(http://www.placehold.it/470x188) no-repeat; }
.promo .content .row-fluid { height: 50px; }
Have you tried setting a min-height property? This will set a minimum height so your image won't be cut off.
I would try setting both divs to height:50%;, this should give you the right effect.