I want my 'header' div to sit within the 'container' div. At the moment the 'header' div is sitting above the 'container' div and I cannot seem to put it in it. Below is the coding. Thanks for the help.
HTML:
<body>
<div id="container">
<div id="header">
<h1>Title Goes Here</h1>
</div>
</div>
</body>
CSS:
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
It is inside it. Remove the background color on your header and you'll see the container's background behind.
It is inside the container, just the looks like it's on top because of the colors. Open up w/e browser tools you prefer and take a look at the container div.
It is inside your container. Adding padding or remove the background will make it more visable
jsfiddle
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
padding:20px;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
set background color to transparent or just remove it temporarily, you'll see that the header is inside there
Related
Can I achieve this with css only?
50% does not work on rectangle
1 more thing: no fixed height.
One option is to set a fixed value for horizontal border-radius as follows:
div {
display: inline-block;
border-radius: 50px / 50%;
padding: 1em 2em;
border: 2px solid #000;
background-color: #009EE0;
text-align: center;
}
<div>
Stuff goes <br>
here... <br>
& here... <br>
Setting a fixed value of horizontal border-radius does the trick!
</div>
You may also want to use a different percentage value instead:
div {
display: inline-block;
border-radius: 12% / 50%;
padding: 1em 2em;
border: 2px solid #000;
background-color: #009EE0;
text-align: center;
}
<div>
Stuff goes <br>
here... <br>
& here... <br>
Or set a different percentage value for horizontal border-radius
</div>
Try this
div{
width:200px;
height:100px;
background:lightblue;
border-radius:50px;
border:2px solid black
}
<div></div>
Edit: use 50vw for making it responsive any height will be okay
div{
width:500px;
height:300px;
background:orange;
border-radius:50vw;
}
<div></div>
There is a trick for that
Just us a very large border-radius value!
e.g. {border-radius:10000px;}
Here is link to demo (Try changing width/height to see working) : http://jsfiddle.net/890z699p/
.rect {
width: 300px;
height: 200px;
background: #000;
border-radius: 10000px;
}
<div class="rect"></div>
It works on me, below is my code snippet
div {
display: block;
border-radius: 50%;
width: 200px;
height: 100px;
border: 2px solid #000;
background-color: #009EE0;
}
<div>
</div>
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
I am trying to create a HTML layout and I have created a number of elements and given them a border etc in my CSS. I am trying to have the main 'Wrapper' centered so everything that goes inside this element are also centered.
I have tried everything, margin, align, absolute etc and nothing is working. My stays situated in the top left corner of my page.
This is my index page where the elements are:
<!--#include file ="inc.heads.asp"-->
<html>
<head>
</head>
<body>
<div id ="divWrapper">
<div id ="divHeader">
<img src="Images/title.png">
<br>
<div id ="divNavBar">
<br>
<div id ="divContent">
</div>
</div>
</div>
</div>
</body>
</html>
and this is my CSS:
body {
background-color: #300;
}
#divWrapper {
margin: 0 auto;
width: 800px;
}
#divHeader {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divNavBar {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divContent {
float: left;
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
If someone could possibly shed some light on why none of the things I have tried work and what a possible solution could be.
Thanks!
#divWrapper{
margin-left:auto;
margin-right:auto;
}
Should do the trick.
Just add margin: 0 auto to the contents of #divWrapper:
For example, add to your CSS:
#divWrapper * {
margin: 0 auto;
}
If you only want the div elements to be centered, use:
#divWrapper div {
margin: 0 auto;
}
You can see a working demo here > http://jsfiddle.net/gu7Sr/
Also, as a side note, try to avoid using <br /> for creating your layout. It won't scale well and you'll have a tough time redesigning in the future!
I think this is what you want. Link : http://codepen.io/anon/pen/Ihzxp
<body>
<div id="divWrapper">
<div id="divHeader">
<img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Small.png">
<div id="divNavBar">
<div id="divContent">
Stuff
</div>
</div>
</div>
</div>
</body>
and
body {
background-color: #300;
}
#divWrapper {
width: 100%;
}
#divHeader {
width: 600px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
text-align:center;
}
#divNavBar {
width: 550px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 15px;
margin: 5px auto;
}
#divContent {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
}
More just a comment to BenM's answer, but I don't have the reputation to comment yet.
Pretty sure just:
margin:auto;
will do the trick by itself.
Seriously what is the point of all those wrappers? Just do this:
body {width: 800px; margin: 0 auto; }
I have a situation where I have one div of fixed width, containing an image pulled from Twitter, and another div of variable width containing user text of variable length. What I want to achieve is something like the following:
I can do this well enough with a single div that has background-image and padding-left. But I want to be able to apply border-radius to the img element, which simply won't be possible with a background-image.
If I do text-align: center on the outer div, it gets me halfway there. Here's a DEMO and a screenshot:
But this obviously isn't fully what I want.
How can I accomplish this?
Ask and you shall receive — a simplified jsFiddle example:
As an added bonus, the text is vertically centered too!
HTML:
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png" />
</div>
<div class="logo-name">
AppSumo is a really really long title that continues down the page
</div>
</div>
CSS:
.logo {
background-color: #eee;
display: table-cell;
height: 100px;
position: relative;
text-align: center;
vertical-align: middle;
width: 600px;
}
.logo-container {
background-color: #fff;
border-radius: 10px;
left: 10px;
position: absolute;
top: 10px;
width: 75px;
}
.logo-name {
font: bold 28px/115% Helvetica, Arial, sans-serif;
padding-left: 85px;
}
Would it be something like this?
http://jsfiddle.net/uPPTM/6/
.logo {
width:80%;
margin:auto;
background-color: red;
}
.logo-container {
border: 1px solid gold;
width:73px;
height: 73px;
display: inline-block;
vertical-align:middle;
}
.logo-name {
display: inline-block;
}
You can float the image container (or image itself without the container) to the left, clearing anything the left... and then float the text to the left, clearing anything to the right.
.logo-container{
float:left;
clear:left;
}
.logo-name{
float:left;
clear:right;
}
You can adjust the distance of the text using margins.
.logo-name{
float:left;
clear:right;
margin-top:10px;
margin-left:5px;
}
Use absolute positioning with a left position to push the title text past the image.
http://jsfiddle.net/uPPTM/9/
.logo { width: 50px; }
.title {
position: absolute;
top: 0;
left: 50px;
font-size: 32px;
text-align: center;
}
img {
border: 1px solid gray;
border-radius: 15px;
}
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png">
</div>
<div class="logo-name">AppSumo</div>
</div>
The #content div holds most of the web content. As you can see below, there is a top margin of 280px, because that is the height of the header image of the site, which is placed in the 'body' as a background (image/sky1.jpg).
How do I position a div as a holder above the 'margin' of the #content div so that I could place my #navigation, #Title divs above the header image?
The #top-float div just above the #content div was the start of it but each time I add more to the height the
'margin' get affected pushing it below.
I tried putting the <div id="top-float></div> above the <div id="content"></div> in the html. Is this how should I position this?
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
padding-left:2.3em;
padding-right:2.3em;
height:10em;
}
#content {
width: 890px;
margin: 280px auto 0;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: px auto 0;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
The easiest way would be to give your #top-float a height of 280px and drop the top-margin for #content as such:
<html>
<head>
<style type="text/css">
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
margin: 0;
padding: 0 2.3em;
height:280px;
}
#content {
width: 890px;
margin: 0 auto;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: 0 auto;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
</style>
</head>
<body>
<div id="#top-float">
</div>
<div id="#content">
</div>
<div id="#footer">
</div>
</body>
</html>
If you need em sizing, then give the children of #top-float em sizing, and make sure to give #top-float overflow: hidden;
If you want your content to appear above your header in your markup for SEO purposes, you can do the following:
<html>
<head>
<style type="text/css">
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
position: absolute;
top: 0;
left: 0;
padding: 0 2.3em;
height:280px;
}
#content {
width: 890px;
margin: 280px auto 0;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: 0 auto;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
</style>
</head>
<body>
<div id="#content">
</div>
<div id="#footer">
</div>
<div id="#top-float">
</div>
</body>
</html>
Just remove the top margin from your content div, and add the placeholder above it with the height specified.
HTML snip:
<body>
<div id="header">Stuff</div>
<div id="content">Body stuff.../div>
</body>
And CSS:
#content {
margin-top:0;
}
#header {
height:280px;
}
If it makes more sense for the extra header information to be within the content div (semantically), you can use a negative margin.
HTML snip:
<body>
<div id="content">
<div id="header">Stuff</div>
Body stuff...
</div>
</body>
And CSS:
#content {
margin-top:280px;
}
#header {
margin-top:-280px;
}
It is a little tricky answering this without also seeing your HTML, but a few suggestions:
Place your #top-float div outside of your content div
Use negative margins
Put your content div flush with the top of the browser with a header div inside. Then put your header image inside your header div as the background image
it doesn't look like you are centering anything so you can also use absolute positioning for the header div
As always, there is no one way of accomplishing this.
You may want to use absolute or fixed positioning for your #top-float div.
Why do you want to put the header image as a background image? I think you'll find that it all works out easier if you don't put the site's header image as a background. It is also common practice that clicking on the site's logo (which I assume is in your header image) takes the user back to the home page. Making the site's logo a background image effectively disables this feature.