This question already has answers here:
css background color with floating elements
(5 answers)
Closed 6 years ago.
I have an issue with my floated child divs not growing with my parent div. Is there a way to fix this? I need the wrapper to be 100% of the content in either div. Here is the html;
<body>
<div id="wrapper">
<div id="leftpane">
<div id="lefthead">
<div id="leftheadfiller">
</div>
<div id="leftheadlogo">
</div>
<div id="leftheaddivider">
</div>
</div>
<div id="leftcontent">
</div>
</div>
<div id="rightpane">
<div id="righthead">
<div id="rightheadfiller">
</div>
<div id="rightheadlogo">
</div>
<div id="rightheaddivider">
</div>
</div>
<div id="navigation">
Properties Careers About Blog Advertise Contact
</div>
<div id="rightcontent">
</div>
</div>
<div id="close">
</div>
</div>
</body>
And here is the css;
html,body {
background-image:url('images/background.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
background-color: aqua;
height: 100%;
width: 866px;
margin-left: auto;
margin-right: auto;
}
#leftpane {
background-image: url('images/darkbackground.gif');
width: 326px;
height: 100%;
float: left;
}
#lefthead {
height: 132px;
width: 100%;
}
#leftheadfiller {
height: 75px;
width: 100%;
}
#leftheadlogo {
background-image: url('images/index_07.gif');
width: 71px;
height: 56px;
float: right;
}
#leftheaddivider {
height: 1px;
width: 100%;
background-image: url('images/lightbackground.gif');
float: right;
}
#lefttcontent {
height: 100%;
background-color: fuchsia;
}
#rightpane {
background-image: url('images/lightbackground.gif');
width: 540px;
height: 100%;
float: right;
}
#righthead {
height: 132px;
width: 100%;
}
#rightheadfiller {
height: 75px;
width: 100%;
}
#rightheadlogo {
background-image:url('images/index_09.gif');
width: 109px;
height: 56px;
float: right;
}
#rightheaddivider {
height: 1px;
width: 100%;
background-image: url('images/darkbackground.gif');
float: right;
}
#navigation {
margin-top: 2px;
font-family: Arial, Helvetica, sans-serif;
color: #A3A3A3;
font-size: 14px;
word-spacing: 44px;
text-align: center;
width: 100%;
height: 18px;
}
#rightcontent {
padding-left: 6px;
background-color: fuchsia;
}
#close {
clear: both;
}
Is there a way to fix this? I have this set up on a temporary folder on my local server at:
http://68.113.27.229/test
The two divs that I need to force the wrapper to grow are Leftcontent and Rightcontent.
Thanks!
Add overflow: hidden to the parent div element.
If you don't want the overflowing content to be hidden, then try this:
Insert this as the last div inside the wrapper div.
<div style="clear: both"></div>
Related
How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
I'm unable to remove two margins. The one at the top of the page and one underneath my hero image. I've tried margin 0, padding 0, etc.. I've even tried to remove it from the body and html. How can I fix this?
/* Setting up our grid */
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
/*Set the width of the entire website here */
margin-right: auto;
margin-left: auto;
/*Margin-left and right are set to auto to center the container */
}
.seven:first-child,
.eight:first-child,
.nine:first-child,
.ten:first-child,
.eleven:first-child,
.five:first-child,
.four:first-child,
.three:first-child,
.two:first-child,
.one:first-child,
.six:first-child {
margin-left: 0;
/* This line of code makes the left-most column align to the left of the screen */
}
.eleven {
width: 91.5%;
float: left;
margin-left: 2%;
}
.ten {
width: 83%;
float: left;
margin-left: 2%;
}
.nine {
width: 74.5%;
float: left;
margin-left: 2%;
}
.eight {
width: 66%;
float: left;
margin-left: 2%;
}
.seven {
width: 57.5%;
float: left;
margin-left: 2%;
}
.six {
width: 50%;
/* This div spans six columns (the entire row)*/
float: left;
margin-left: 0%;
}
.five {
width: 40.5%;
/* This div spans five columns */
margin-left: 2%;
float: left;
}
.four {
width: 32%;
float: left;
margin-left: 2%;
}
.three {
width: 23.5%;
float: left;
margin-left: 2%;
}
.two {
width: 15%;
float: left;
margin-left: 2%;
}
.one {
width: 6.5%;
float: left;
margin-left: 2%;
}
.row {
width: 100%;
clear: both;
/* Clear creates new styles for the next row */
padding: 0px;
margin: 0px;
}
header {
height: 110px;
}
.hero-image {
height: 767.38px;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
.row2 .six {
width: 50%;
height: 495.56px;
background-color: grey;
}
.row2 .right {
width: 50%;
background-color: blue;
}
.row3 .lower {
width: 50%;
height: 495.56px;
background-color: green;
}
.row3 .corner {
width: 50%;
height: 495.56px;
background-color: black;
}
.follow {
height: 908px;
background-color: tan;
}
.bottom {
height: 169px;
background-color: grey;
}
footer {
height: 169px;
background-color: black;
}
<div class="container">
<!--everything on the page-->
<div class="row">
<div class="hero-image">
<header>
<h1>Vintage McDonald's</h1>
</header>
<h2>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</h2>
</div>
</div>
<!--closing row 1-->
<div class="row">
<div class="row2">
<div class="six">
</div>
<div class="six right">
</div>
</div>
</div>
<!--closing row 2-->
<div class="row">
<div class="row3">
<div class="six lower">
</div>
<div class="six corner">
</div>
</div>
</div>
<!--closing row 3-->
<div class="row">
<div class="follow">
</div>
</div>
<!--closing row 4-->
<div class="row">
<div class="bottom">
</div>
</div>
<!--closing row 5-->
<div class="row">
<footer>
</footer>
</div>
<!--closing row 6-->
</div>
If I understood you correctly >>> Try this:
Your CSS has class:
.hero-image {
height: 767.38px;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
Delete height:
.hero-image {
backgrround-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
And add new CSS style:
h2 {
margin-bottom:0;
}
Hope it helped...
UPDATE>>>
Try this
.hero-image {
backgrround-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
background-size:contain;
}
OR
.hero-image {
backgrround-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Try this link: https://necolas.github.io/normalize.css/5.0.0/normalize.css
Copy and paste the code in a new css file and link it before any other file.
And try this to remove margin from top of the page:
.container {
margin-top: 0;
}
and this for hero image:
.hero-image header {
margin-bottom: /* how much ever you want*/
}
or if that does'nt work then try this:
.row {
margin-bottom: /* how much ever you want*/
}
Yeah I know the topic was explained probably million times, but have a look at this. I cant make #content and/or .content-bg go all the way down and show the pattern down to the bottom:
html, body {
height: 100%;
}
body {
min-width: 500px;
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0px auto -97px;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #ccc;
}
#content {
min-height: 100%;
}
.content-bg {
background: url("http://www.squidfingers.com/_patterns/files/pattern_136.gif") repeat scroll 0% 0% #F9EDE4;
overflow: hidden;
}
#footer {
background-color: #ccc;
height: 97px;
}
<body>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="content">
<div class="content-bg">
content
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</body>
Any ideas?
I have a wrapper div that holds a header, navbar, and a content div. when the content expands I want the wrapper div to expand with it however it currently doesn't do this. In other word I want the edges of the content to remain in the wrapper div. Once the content div expand beyond the height of the screen I need the scrollbar to appear on edge of the edge of the edge of the window.
my css:
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
overflow-y: auto;
}
body {
background-image: url(../Images/background1.jpg);
background-size: cover;
min-width:1000px;
background-repeat: no-repeat;
}
#wrapper1
{
height: 100%;
width: 94%;
margin-left: auto;
margin-right: auto;
background-color: #006699;
position: relative;
overflow: hidden;
}
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#header, #nav, #content
{
width: 94%;
margin-left: auto;
margin-right: auto;
}
#header
{
height: 15%;
background-color: Red;
}
#nav
{
height: 2%;
min-height: 35px;
background-color: Yellow;
}
#content
{
height: 100%;
background-color: brown;
}
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
</body>
http://jsfiddle.net/VB3PM/
Try this:
<style type="text/css">
html,
body
{
height:100%;
}
#wrapper
{
position:relative;
min-height:100%;
}
</style>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
Change the overflow CSS property of #wrapper from hidden to auto as shown below
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: auto;
}
My navbar (940px for instance) contains 3 divs :
One aligned left (automatic sizing) containing a menu
One aligned right (defined size, 100px for instance) containing a logo
One (automatic sizing) containing an input[type="text"] that should stick to left and right divs
Each div will have a different background/opacity, there must not have overlapping between them.
He is a drawing about what I need :
+------------------+-------------------------------------------+-----------------+
| MENU | INPUT TYPE TEXT (width: 100%) | LOGO |
+------------------+-------------------------------------------+-----------------+
Do you have an idea on how to do that? Thanks in advance.
Don't float the center <div>. If you move it below the floating elements, it will sit between the floated elements. Adding overflow: hidden to the middle element prevents it from flowing beneath the floated elements.
HTML from your example:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
and the CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 500px;
background: blue;
overflow: hidden;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
check this fiddle I made 3 div's and 1 container. hope it helps.
body
{
margin: 0px;
padding: 0px;
}
.container
{
width: 100%;
height: 200px;
}
.left
{
width: 50px;
height: 200px;
background: green;
float: left;
}
.center
{
width: 68%;
height: 200px;
background: blue;
float: left;
}
.right
{
width: 50px;
height: 200px;
background: yellow;
float: left;
}
Rearrange your HTML so the elements are in this order:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
Then use this CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 100px;
background: blue;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
jsFiddle example
Move the item you want on the right to the first position in the HTML:
<div class="wrap">
<div class="r">Logo</div>
<div class="l">Menu</div>
<div class="c">Center content</div>
</div>
Then it's simply CSS:
.wrap { background: #ddd; margin: 10px; }
.wrap > div { padding: 10px;}
.r { float: right; background: #aaa; width: 100px; }
.l { float: left; background: #eee; width: 100px; }
.c { text-align: center; }
DEMO HERE