So I made a site where I have a wrapper div. The content is then centered and getting height 100% to make sure is filling the browsers view area. The strange thing is that the main div have a border. If I make my browser small and use the scroll-er to get down on the page. The border is then only showing on the part of the div that was in the view area. When I scroll down the border is not set on the rest of the div. Any one else had this issue? I cant seem to find anything about this particular issue in google.
This is my basic layout
<html>
<head>
<style>
html, body {
background: url('../img/subtle-circles-pattern-2268.png') left top repeat;
height: 100%;
margin: 0;
padding: 0;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
color: #666;
}
#wrapper {
z-index:1;
width: 100%;
height: 100%;
min-height:100%;
text-align: center;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#content {
margin: 0px auto;
width: 940px;
height: 100%;
border-left: 1px solid #c3c3c3;
border-right: 1px solid #c3c3c3;
background-color: #FFF;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
alot of content<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/><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/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</din>
</div>
</body>
</html>
You have to remove the Height property from the content ID , The height of the ID will be calculated according to the amount of the content you have on your page so your css should be like
#content {
background-color: #FFFFFF;
border-left: 1px solid #C3C3C3;
border-right: 1px solid #C3C3C3;
margin: 0 auto;
text-align: left;
width: 940px;
}
Related
I have 4 divs in this order : #header , #content, #navigation, #footer.
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
float: left;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
I am learning css, and in this scenario my understanding is that a non floated block level div named "navigation" will move in to take the place of a left floated div "content".
The text 'NAVIGATION' inside of the div with id "navigation" is not hiding behind the #content div and is instead appearing inside of #footer div.
After going through this question Text in floated div I learnt that content in following div will float around this floated div.
Now since this #content div is only 75% wide, why is the NAVIGATION text not appearing right next to the #content div ? Why does it appear inside of the #footer div ?
display:inline-block is a better way to use float
inline-block is better than float, The reason that using the float method is not suited for layout of your page is because the float CSS property was originally intended only to have text wrap around an image and is, by design, not best suited for general page layout purposes
Yo can do this, first remove
float: left;
in #content and add
display: inline-block;
and add
display: inline-block;
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
display: inline-block;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
display: inline-block;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
I'm currently trying to design my on WordPress theme (and am a total newbie), and I'm having trouble centering my entire blog. For reference, this is what it looks like now.
Everything used to be centered properly, then I changed the width of the overall blog, then suddenly the menu wasn't taking up the max width, and the blog and sidebar were no longer centered. I'd love any help for this. Thanks in advance! :)
Here's the code I have for the blog:
div#container
{
margin: 0px auto;
width: 1050px;
min-width: 1050px;
max-width: 1050px
}
div#content
{
max-width: 640px;
margin-right: auto !important;
margin-left: auto!important;
margin-bottom: 30px;
float: left;
padding: 30px 30px 30px 30px;
background-color: white!important;
}
And for the sidebar:
div#primary
{
/* Primary Widget Area DIV */
padding: 10px 25px 30px 25px !important;
margin: 0px auto!important;
float:right;
background-color: white!important;
max-width: 260px!important;
}
And for the menu:
.menu {
background-color: #676565;
margin: 0px auto;
width: 100%!important;
list-style: none;
padding: 10px 10px 10px 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2.5px;
font-family: 'Tw Cen MT'!important;
position: relative;
}
you can try to style the body tag as quick solution for your problem.
Example is given below,
html{
background-image: url("https://i.imgur.com/urEcvAw.png"); background-position: center center; background-size: 200px!important; background-size: cover; background-repeat: repeat; background-attachment: fixed; margin: 0;
}
body{
max-width:160px;
margin:0 auto;
background:#fff;
}
.sample{
text-align:center;
background:#fff;
height:80px;
width:100%;
}
<html>
<head>
</head>
<body>
<div class="container sample">
<p>here all websites header, main block footer comes.. </p>
</div>
</body>
</html>
hope it may helpful to you..
Your .menu class is set to position:relative;
So, you have to add below lines to your .menu class :
left:0;
right:0;
margin:auto;
width:100%;
I believe this should fix your issue.
This question already has answers here:
Make absolute positioned div expand parent div height
(15 answers)
Closed 4 years ago.
The <div> container shrinks to, well, "zero" after positioning my logo.
Could you please check what's the problem? I'd like it to be centered in the #logo <div>. I thought making parent <div> relative and children absolute should keep logo in the <div>.
Html
<body>
<div class="wrapper">
<header>
<div id="logo">
<img src="./img/logo.png">
</div>
</header>
</div>
</body>
CSS
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
}
#logo img {
width: 150px;
height: auto;
position: absolute;
margin: auto;
border-style: solid;
border-color: red;
border-width: 2px;
}
Yes it should to behave something like that because position: absolute and position: fixed dose not take place from it's parent or container. When you use these two css properties they go outside regular document follow. That's why parent treat inside have no content and height not auto increase until set you height by explicitly by css properties like height: 100px (for example) or min-height: 100px (for example).
According your current structure either you set the minimum height based logo.
header {
min-height: 100px; // 100px here logo size assumed
}
Or keep the position of logo image relative:
#logo img {
position: relative;
}
I would avoid position absolute, if you wrap your image within a div you can centre your image.
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
max-width: 220px;
overflow: hidden;
}
#logo figure {
width:52%;
margin: 0 auto;
}
#logo img {
width: 100%;
position:relative;
border-style: solid;
border-color: red;
border-width: 2px;
overflow: hidden
}
<body>
<div class="wrapper">
<header>
<div id="logo">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Pepsilogo.png">
</figure>
</div>
</header>
</div>
</body>
The img will take up 100% of the total space, given to it by the figure.
You can change the width of the figure and then the image will respond, keeping it centered.
Please take a look at my fiddle. I am trying to have a input field next to a 32x32 icon. For some reason there is white space that hangs off the bottom of my div. Both the div and image should be 32x32px I'm doubtful it's my browser but I can't figure it out:
http://jsfiddle.net/WbhgA/1/
Here's what I'm seeing
http://i.imgur.com/3C1eN.jpg
Try this - http://jsfiddle.net/WbhgA/15/
.inputHolder {
height: 32px;
margin-right: 60px;
}
.inputHolder input {
border: 1px solid;
border-radius: 6px;
width:100%;
height: 32px;
line-height: 32px;
}
.icon {
border: 1px solid red;
border-radius: 6px;
width: 32px;
height: 32px;
float: right;
margin-top: -32px;
background: transparent url(http://icons-search.com/img/fasticon/icomic_lnx.zip/icomic_lnx-icons-32X32-web.png-32x32.png);
}
You have padding-right of 20px on the input div
so
.inputHolder {
display:table-cell;
width:100%;
height:32px;
}
Fiddle here http://jsfiddle.net/WbhgA/13/
Update: oh that space
you just need to align it vertically
.inputHolder {
display:table-cell;
width:100%;
height:32px;
border:1px solid red;
vertical-align: middle;
}
So I'm trying to add a badge to the top right corner of a site I'm doing some work on. z-index works to float the object above the page content but each time i try to use position relative the background image disappears only position absolute shows the image. I don't really want to use absolute as the image needs to be positioned on the right hand side of the sites menu bar not the right hand side of the viewport.
Any thoughts or advice appreciated
<div class="badge-box">
Book Now!
</div>
<div id="header">
<img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" />
</div>
<div id="main-menu">
<div>
Home
Our Cottages
Bed & Breakfast
Price Guide
Location & Local Attractions
News & Special Offers
Contact Us
</div>
</div>
.badge-box {
width: 1030px;
margin-left: auto;
margin-right: auto;
border: 0px solid red;
}
.badge {
background: url(../images/badge.png) 0px 0px no-repeat;
width: 148px;
height: 148px;
text-indent: -10000px;
position: relative;
z-index: 999;
}
#header {
width: 960px;
height: 40px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding: 20px 0px 0px 20px;
background: #58564f url(../images/header-top-background.png);
}
#main-menu {
width: 980px;
margin-left: auto;
margin-right: auto;
height: 35px;
/*background: red;*/
background: #58564f url(../images/header-bottom-background.png);
font-family: Georgia, "Times New Roman", Times, serif;
}
#main-menu div {
width: 776px;
height: 35px;
margin-left: auto;
margin-right: auto;
background: blue;
}
#main-menu div a {
display: block;
float: left;
padding: 5px 10px 0px 10px;
height: 30px;
color: #FFFFFF;
font-size: 1.2em;
text-align: center;
background: green;
}
#main-menu div a:hover {
background-color: #333333;
}
unless you do a display:block on that .badge class, a lot of the styles you have defined won't take effect as it defaults to inline. maybe that is all you need to get started.
i am not sure what is the effect you are trying to achieve. can you post a png/jpeg of the mock-up?