i want to create an div that is 100% (of Browser). The following div is in a div that ist not full width container (that container must stand)
I try this:
<div class="container">
<div style="
width: 100%;
padding-left: 1000px;
padding-right: 1000px;
margin: 0 -1000px;
background-color: #075283;
padding-top: 10px;
padding-bottom: 10px;">
TEXT
</div>
</div>
but i have scroller in browser.
how can i fix it that the browser and the smartphone show me only the full lenght of the div in the lenght of the browser?
I don't see why you'd need the div that has to be 100%, be inside another smaller div, but you could always do something like.
.inner-div {
position: absolute; // Or fixed if the parent div has position: relative or absolute.
top: 0;
left: 0;
right: 0;
bottom: 0;
}
What about this?
<div class="container" style="width: 100%; float:left;">
<div style="
width: 100%;
float:left;
background-color: #075283;
padding-top: 10px;
padding-bottom: 10px;">
TEXT
</div>
Try to use viewportwidth/viewportheight (vw/vh)!
.wrapper {
height: 500px;
width:500px;
background:red;
}
.inner {
height: 100vh;
width: 100vw;
background: blue;
}
<div class="wrapper">
<div class="inner"></div>
</div>
Working example on jsfiddle!
Related
I'm having a rough time trying to position things in CSS. I understand padding,margin,height,width which to me seems like it should be enough to organize nested div boxes, but unfortunately it doesn't seem to be that easy for me.
Anyway, in my example below, the profile picture is bigger than the actual div it's contained in.
What am I doing wrong here?
CSS
.mailcontainer{
top: 40px;
width:600px;
height: 100%;
width: auto;
position: relative;
background-color:green;
}
.mail {
margin: 5px auto;
width: 700px;
height: 40px;
z-index: 100px;
overflow: hidden;
background-color: #d3d3d3;
position: relative;
border-radius: 6px;
}
.leftprofileimage img {
float: left;
max-height: 100%;
width: auto;
position: absolute;
border-radius: 90px;
}
.snippet {
float: right;
top: 10px;
width: 55%;
margin-left:26%;
position: absolute;
}
.sendername {
font-size: 1.0em;
width: 26%;
padding: 9px 0;
margin-left: 15%;
position: absolute;
}
HTML
<div class="mailcontainer">
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
http://codepen.io/pen/
Your profile picture is 40x40, and the nearest positioned parent is .mail, which is also 40px. The profile pics immediate parent (.leftprofileimage) was not explicitly positioned, so that's probably where the confusion lays. This codepen simply adds rules to .leftprofileimage to make it the element that profile pic conforms to:
http://codepen.io/sean9999/pen/xypBb
I'm having some trouble figuring out how to do this. I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars.
See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can't add image)
The blue outline represents the centered wrapper, and the orange box is the header div that I'm trying to get to fit to the right side of the page. I've got it to work using 100% width but it creates a horizontal page scroll since it's making it the same width as it's parent. I want it to expand for users that have higher resolutions so it always fits snug to the right side. I hope this makes sense.
my code looks something like...
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
CSS:
div#wrapper {
margin: 0 auto;
width: 1020px;
position: relative;
}
div#header {
height: 150px;
position: absolute;
left: 510px;
width: 100%;
}
div#left {
width: 510px;
float: left;
}
div#right {
width: 100%;
float: left;
}
I'm pretty new to this stuff so if you notice any errors here or bad practices please point them out! Thanks for the help! :)
Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. This allows you to use width: 100% for the header which will extend to the end without scroll bars. You then make the header relative to the right container. Here is a jsfiddle you can play with.
Note I made the widths smaller so it would fit in my jsfiddle window.
HTML:
<body>
<div id="wrapper">
<div id="leftContainer">
<div id="left">
This is left
</div>
</div>
<div id="rightContainer">
<div id="header">
This is a header
</div>
<div id="right">
This is right
</div>
</div>
</div>
</body>
CSS:
div#wrapper {
text-align: center;
width: 100%;
position: relative;
white-space: nowrap;
overflow-x: scroll;
}
div#header {
z-index: 1000;
height: 150px;
position: absolute;
left: 0;
width: 100%;
background: green;
}
div#leftContainer {
float: left;
width: 50%;
height: 500px;
display: inline-block;
}
div#left {
float: right;
width: 260px;
height: 300px;
background-color: purple;
}
div#rightContainer {
position: relative;
float: right;
width: 50%;
height: 500px;
display: inline-block;
}
div#right {
width: 260px;
height: 300px;
background-color: yellow;
}
Try this one. I changed the wrapper width to 80%. Not sure if that's ok. But I works well when expanding the page. Moved the header outside of wrapper and also added background color for clarity.
Note 1: right DIV's margin-top is same size as header DIV's height.
HTML
<div id="outerWrapper">
<div id="header">
Header
</div>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>
</div>
CSS
div#wrapper {
margin: 0 auto;
width: 80%;
height: 100%;
position: relative;
background-color: #CCCCCC;
}
div#header {
height: 150px;
float: right;
position: absolute;
left: 50%;
width: 50%;
background-color: yellow;
}
div#left {
width: 50%;
height: 100%;
float: left;
background-color: red;
}
div#right {
width: 50%;
height: 100%;
float: left;
margin-top: 150px;
background-color: blue;
}
Hope this helps.
I am having trouble generating a HTML/CSS layout. The best way to think of it is to take a normal horizontally centered page layout. Only I want one div to extend beyond the centered layout to the right edge of the browser window.
This should work fluently with browser window resizing.
Here are two CSS-only methods to achieve layouts like this. Both have been briefly tested in IE 7/8/9 and Chrome.
Example 1
Here's an example where you know the heights of all your elements.
Demo: http://jsfiddle.net/3RDuy/2/
HTML
<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>
CSS
DIV { position: absolute; height: 100px; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; }
#left{ width: 100px; left: 50%; top: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; top: 200px; margin-left: -200px; background-color: #aaa; }
Example 2
Here's an example where you only know the height of the top and bottom.
Demo: http://jsfiddle.net/3RDuy/3/
HTML
<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>
CSS
DIV { position: absolute; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; height: 100px; }
#left{ width: 100px; left: 50%; top: 100px; bottom: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; top: 100px; bottom: 100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; bottom: 0; margin-left: -200px; background-color: #aaa; height: 100px; }
If you want variable heights on everything (including the ability to have a height greater than 100%) you will probably need to use JavaScript.
This was a very interesting challenge.
I needed a similar effect several months ago with an element extending out of the container to the window's edge, but did not need that space available for content - it was merely a design effect.
Tim's answer is solid, but needing to know the height of an element is not practical. My solution eliminates this requirement.
Making use of a wrapper, some padding and negative margins, we can manipulate our layout to replicate the desired functionality.
Markup:
<div class="header">
<h1>Hello World!</h1>
</div>
<div class="content">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet.</p>
</div>
CSS:
.header,
.footer {
clear: both;
margin: auto;
width: 600px; /* Your container width */
background: grey;
}
.content {
float: right;
width: 50%;
padding-left: 300px; /* Half of your container width */
}
.a {
float: left;
margin-left: -300px; /* Half of your container width */
width: 200px;
height: 10em; /* Not required, set for visual */
background: red;
}
.b {
margin-left: -100px; /* The difference between half your container width and element A */
height: 10em; /* Not required, set for visual */
background: yellow;
}
Demo: http://jsfiddle.net/rkW9J/
It should be noted that this hasn't been tested extensively cross-browser, but doesn't implement any obvious layout quirks so we should be good.
Can't find a solution width pure CSS, but here's how to do it with javascript / jquery.
Demo
HTML:
<div id="wrapper">
<div id="header"> 1080px </div>
<div id="left"> 400px </div>
<div id="right"> full width </div>
<div id="footer"> 1080px </div>
</div>
CSS:
#wrapper { width:1080px; margin:0 auto; }
#header, #footer { clear:both; }
#left { float:left; width:400px; margin-right:10px; }
jQuery:
var right = $('#right'),
left = $('#left');
$(window).on('resize',positionRightDiv);
function positionRightDiv(){
var posLeft = left.offset().left + left.outerWidth(true),
posTop = left.offset().top;
right.css({'position':'absolute','left':posLeft,'top':posTop,'right':0});
}
positionRightDiv();
Note: for this method to work, #wrapper must not have position:relative; nor overlow:hidden;
P.S. Nice atom heart mother profile pic ;-)
I am constructing a website based off the 1140 CSS Grid, which is an entirely fluid grid set to a max-width of 1140px. I have laid what is going to become a nav bar over this layer that extends five pixels further on each side (for everyone's favorite 'ribbon' design effect) and would like the middle 1140px (of the now 1150px nav) to be adjust width along with the grid below it. Everything I have tried thus far, however, has not worked. Anyone have any ideas?
HTML:
<div class="float">
<div class="nav">
<div class="navleft">
<img src="images/banneredgel.png"/>
</div>
<div class="navbar">
</div>
<div class="navright">
<img src="images/banneredger.png"/>
</div>
</div>
</div>
CSS:
.float {
width: 100%;
display: inline block;
overflow: hidden;
position: fixed;
}
.nav {
width: 100%;
height: 43px;
max-width: 1150px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.navleft {
float: left;
width: 5px;
height: 43px;
}
.navbar {
float: left;
width: 100%;
max-width: 1140px;
height: 38px;
background-color: #6fd0f6;
}
.navright {
float: left;
width: 5px;
height: 43px;
}
I created a JS fiddle with your answer. http://jsfiddle.net/thinkingsites/Vz4TC/3/
Your problem is that the width 100% doesn't allow for the two bits on the side, so when your page shrinks it wraps the children of .nav
What I did was position them absolutely in .nav and gave .navbar a left and right margin to allow for the ribbons WITHOUT setting it to width:100% as that would push the ribbons away. I've also set the max width of .nav to 800 and the nav never expands beyond that.
I was able to take the code Thinking Sites offered and altered it a number of lines more in order to get something that hovers over the center while the width is less than the browser (ribbons on the edges) and then turns into a bar when the site fluidly adjusts to a smaller browser width.
HTML:
<div class="float">
<div class="navleft">
<img src="images/banneredgel.png">
</div>
<div class="navbar">
<img src="images/logo.png" class="logo"/>
</div>
<div class="navright">
<img src="images/banneredger.png">
</div>
</div>
CSS:
.float {
width: 100%;
max-width: 1140px;
height: 38px;
position: fixed;
}
.navbar {
background-color: #6fd0f6;
height: 38px;
padding-left: 5px;
padding-right: 5px;
}
.navright,.navleft {
width: 5px;
height: 43px;
position: absolute;
top: 0px;
}
.navleft{
left: -5px;
}
.navright{
right: -5px;
}
I am looking to create a vertically scrolling website. I'll have a set of 5 divs that I want to have a height of 100% that are stacked on one another, basically making the body 1500% in height. Yeah?
Here is my code so far:
CSS
#contentWrapper {
position: relative;
width: 600px;
height: 1500%;
margin: 0 auto;
border: 1px solid red;
}
.panel {
position: relative;
height: 6.66%;
border: 1px solid blue;
}
.panelGuts {
position: relative;
top: 50%;
width: 100%;
height: 600px;
margin: -300px 0 0 0;
border: 1px solid green;
}
HTML:
<div id="contentWrapper">
<div class="panel">
<div class="panelGuts">
content
</div>
</div>
<div class="panel">
<div class="panelGuts">
content
</div>
</div>
<div class="panel">
<div class="panelGuts">
content
</div>
</div>
</div>
This seems to work in Safari, Firefox, and Chrome but it doesn't work on an iPad or iPhone, and knowing how IE like's to behave, it probably won't work there either.
What I am wanting to know is 1) Why is won't work on an iPad/iPhone, 2) is there a better way to do this, maybe with jQuery?
I need each panel to have a height of 100% and have the content (panelGuts) be vertically centered. I'll be using jQuery ScrollTo (or some scrollTo plugin) to scroll to each div. I'd like to NOT have to set a specific height to each div...
Can anyone help?
I actually figured this out with HTML5. It was pretty simple. For anyone who wants to see my results
CSS
body, html {
margin: 0px;
padding: 0px;
background: #FFF;
height: 100%;
}
#contentWrapper {
position: relative;
width: 600px;
height: 100%;
margin: 0 auto;
}
.panelContainer { display: inline; }
.panel {
position: relative;
display: table;
height: 100%;
width: 100%;
background:green;
}
article.panel:nth-child(2n+2) {
background:blue;
}
.panelGuts {
position: absolute;
top: 50%;
width: 100%;
height: 600px;
margin: -300px 0 0 0;
border: 1px solid black;
}
And my HTML
<div id="contentWrapper">
<section class="panelContainer">
<article class="panel">
<div class="panelGuts">
text 1
</div>
</article>
<article class="panel">
<div class="panelGuts">
text 2
</div>
</article>
</section>
</div>
And a Fiddle for you: http://jsfiddle.net/ryanjay/dwspJ/