Centering the div - html

Simple one that doesn't seem to want to work..
I want to centre a div inside a 100% wide div.
HTML.
<div id="body-outside">
<div id="body-inside">
content
</div>
</div>
CSS.
#body-outside{
width:100%;
float:left;
background-color:#F7B3DA;
}
#body-inside{
width:1280px;
margin:0 auto;
background-color:#F7B3DA;
float:left;
}
The content is staying on the left of the screen at the moment.
Any ideas?
Thanks.

Get rid of float:left;. This pushes it to the left despite setting the margin to auto.

You may also want to think about using text-align: center in the body outside portion.

Related

Right-aligning text under images (without javascript)

I need some advice in creating a caption underneath an image, that is aligned to the right hand side. The image will change, so I can't use fixed value margins or anything like that - is this possible without javascript?
This is the basic layout, 'text-align: right' would work if I could somehow force the wrapper div to constrain to the image width, but currently it breaks past this. Any advice?
<style>
#section{height: 74%; padding-left:5%;}
#photowrapper{position:relative;}
#photo{height:100%; width:auto;}
#detailsdiv{position:relative; text-align:right;}
</style>
<div id='section'>
<div id='photowrapper'>
<img id='photo' src=../imgs/banan.jpg></img>
<div id= 'detailsdiv'>banan</div>
</div>
</div>
Maybe an obvious question but it hasn't been asked that I can see.
Just add display: inline-block; to the #photowrapper CSS
#photowrapper{
position:relative;
display:inline-block;
}
Fiddle: http://jsfiddle.net/DyrS9/
You can add display:table-cell (or table,inline-block) to #photowrapper :
#photowrapper{
position:relative;
display:table;
}
Example

Some CSS problems to vertically extend the content of a div until the end of its container in a layout

I am creating an HTML\CSS tabless layout starting from a psd file and I am having a litle problem.
This is my final result that I would obtain:
and this is my HTML\CSS result: http://onofri.org/example/WebTemplate/
As you can see I have some problem with the left sidebar because the last blue box (the #c div) does not extend vertically to the end of the #container div and so don't match with the footer background immage.
The pnly "solution" that I have found (but this is not a correct solution) is to increase the value of the min-height* property of the **#c div of my sidebare. For example if I increase this value from the original 234px to 334px it seems to work well.
But this is not a real solution because if the amount of content change of the page change this problem occurs again.
How can I solve? What can I do to extend the height of the #c div until the end of its container
Tnx
Andrea
Here's a little trick I use sometimes:
What you need to do is have both the #content and #sidebar divs within a container div. You tell that container div to have a class of "clearfix" and it will stretch itself to be the height of the tallest column. You can then give the container div a background image if you want to make the background of each column look like it stretches the whole length.
For example, a 1px high repeating background like this might work: http://i.stack.imgur.com/W84Xa.jpg
THE CSS:
.clearfix:after{
content:”.”;
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;}
.clearfix{
display:inline-block;
}
html[xmls].clearfix{
display:block;
}
*html.clearfix{
height:1%;
}
#container{
width:770px;
}
#content{
width:542px;
float:left;
}
#sidebar{
width:228px;
float:left;
}
THE HTML:
<div id="container" class="clearfix" >
<div id="content">
Content Div Text
</div>
<div id="sidebar">
Sidebar Div Text
</div>
</div>

How to get the header, the same style and full width as the footer here

I am playing around with bigcommerce at the moment and I am trying to recreate the footer structure for the header. You can see here:
http://thespeedfactory.mybigcommerce.com/
If you look at the footer, how it is full width but the content is central within it.
I want the header to be exactly the same, black with pink/white highlights.
Ive tried moving around the structure within bigcommerce, but I am having a brain failure in getting it to do and look how I want despite knowing it is based around containers and margins.
Any guidance is appreciated.
If I understand you correctly, you want:
the header (#Header) to span the entire width of the page
the footer (#ContainerFooter) to span the entire width of the page
the header (and footer to have the same styling (colors, etc.)
the content area (#Wrapper) to stay a fixed width and centered on the page
To do this, add the following css:
#Container {width:100%;}
#Header {width:100%; margin:0, auto;}
The above css allows the header (by way of its parent container) to stretch the width of the browser page. You'll notice #Wrapper is shifted to the left. Add this:
#Wrapper {margin:auto;)
This centers the #Wrapper.
Your structure should be in place and now you can add your colors, etc. to the #Header to make it match the footer.
This is pretty basic html/css.
Just create a div, place a container in it and start styling.
HTML:
<div id="header">
<div id="container">
<p>content</p>
</div>
</div>
CSS:
#header {
width: 100%;
height:400px;
background:black;
position:absolute;
border-top:3px solid #ff25a7;
}
#container {
width:90%;
height:300px;
margin:0 auto;
}
#container p {
font-size:30px;
padding:10px;
color: #ff25a7;
}
Here's a jsFiddle to help you get started.
You can try giving the header the same class as the footer and afterwards (if the footer's position is absolute bottom), set the position to absolute top:0px;

Fixed div background

I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.

How to make dynamic content positioning?

You see tons of sites with their content very nicely centered, like dribbble.com for example. Even when the window is resized, the content stays centered and when it hits against the side of the page, stops.
I would really like to get this behavior on my website but I'm not really sure how to go about the CSS to make this happen... I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.
Can someone help me figure out how to do something like this?
The standard practice is to have a div that wraps your centered content, such as...
<div id="container">
...everything you want to center
</div>
And the in your CSS:
#container {
width: 970px;
margin: 0 auto; /*first value the margin for top and bottom, auto puts automatic margins in the left and right to center the content*/
}
I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.
It's simpler.
selector-that-matches-a-container {
width: <some length>
margin: auto;
}
Maybe with this CSS:
.content {
position:absolute;
left:100px;
right:100px;
}