i am trying to create a website with div's and css styleing, what i want to do is sit 2 divisions one on top of the other, but centered to the middle of the page, so the top box will be called container, and the bottom box will be called quicklinks
an example of what im trying to achieve is http://www.whirlpool.net.au/
so i have two div boxes the top container will contain all the page info, and the bottom will have an extrernal styleing to make editing links easyier as it will be placed on each page of the website, but im not sure if its possible this way?
both div's will be 900px wide
the container will have a height of 0 auto; so it grows with the content placed inside.
the quicklinks div will have a height of 60px and will obviously move up and down the page under the container box when the content inside grows or shrinks.
i used the
<stlye type="text/css">
.container{<br>
position:absolute: <br>
left: 50%;<br>
width: 900px;<br>
height: 0 auto;<br>
top: 0%;<br>
margin-left: -450px;<br>
}
.quicklinks{<br>
position:static; <br>
left: 50%;<br>
width: 900px; <br>
height: 60px; <br>
margin-left: -450px; <br>
}
</style>
</head>
<body>
<div class="container"></div><br>
<div class"quicklinks"></div><br>
</div>
</body> <br>
</html>
and this code above will bring the container box to the very center of the page but the quicklinks div will sit over the top of this and i need it to fall under it.
<stlye type="text/css">
.container{<br>
width: 900px;<br>
height: 0 auto;<br>
top: 0%;<br>
}
.quicklinks{<br>
position:static; <br>
width: 900px; <br>
height: 60px; <br>
}
</style>
</head>
<body>
<div class="container"></div><br>
<div class"quicklinks"></div><br>
</div>
</body> <br>
</html>
this code above will bring the quicklinks div under the container but both will sit at the top left corner, i can get it to look like its in the center but i want it to acturley find the center per browser.
so could any one please help with this,
am i usign the correct way of scripting to achieve this, and if so
what am i missing out to correct the problem?
cheers
paul
I used your top example and spelt style correctly and assigned the class quicklinks also.
Then margin:auto for both divs worked a treat. I also removed the position:static, didn't think it was needed.
.container{
width: 900px;
height: 0 auto;
top: 0%;
margin: auto;
}
.quicklinks{
width: 900px;
height: 60px;
margin: auto;
}
Phil
To achieve this effect you need something like this
body {text-align:center;}
#wrapper {margin-left:auto;margin-right:auto; text-align:left;width:900px;}
#container{}
#quicklinks{}
<div id="wrapper">
<div id="container">
</div>
<div id="quicklinks">
</div>
</div>
Once you have established the page width and centering with a wrapper the default behaviour for divs is to appear one below the other.
This is a rather simple task to achieve, all you need to do is to set margin:0 auto; to both div's this will center them both.
The code example below is a very simple example of this.
<style>
.box {width:900px; margin:10px auto; padding:10px; border:5px solid #000;}
</style>
<div class="box">Top Box</div>
<div class="box">Bottom Box</div>
An even better way to achieve this would be to use a containing DIV which you use to fix the width and center
<style>
.container {width:900px; margin:0 auto; padding:10px; border:5px solid #99cc00; }
.box {margin-top:10px; padding:10px; border:5px solid #000;}
</style>
<div class="container">
<div class="box">Top Box</div>
<div class="box">Bottom Box</div>
</div>
Related
I am building a website and I am using 2000px wide images. I want the images to be visible on wide screens (like mine - im using TV as monitor) but the smaller screens will only see the images size adequate to their size. (rest will be cropped). The problem is that the image must be centered no matter what size the viewport is. I have used text-align:center; to make the text responsive. I did read the similar topics but no matter what I do the image stays static and not centered. Please help.
HTML:
<body>
<div id="wrapper">
<div class="header">
<img src="images/design/header.png">
</div>
<div class="nav-bar">
Home
About
Portfolio
Gallery
Service
Contact
</div>
<div class="side-bar">
<h1>This is my side bar</h1>
</div>
<div class="content">
<h1>This is my content</h1>
</div>
<div class="footer">
<h1>This is my footer</h1>
</div>
</div>
</body>
CSS:
#wrapper {
max-width: 2000px;
margin: -8px;
overflow: hidden;
text-align: center;
}
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this: Get the screen size using mediacheck and then set up thresholds using #media.
Use the following css to make the image center. max-width:100% will fit the image if the container is smaller than the image width. the image width and height will be reduced to fit.
#wrapper > .header img
{
display: block;
height: auto;
max-width: 100%;
margin:0 auto; /* to make the image center of its container, if container is larger than image size */
}
Update
If you know the exact height of the image, then please see this fiddle. Resize fullscreen to see the image cropping.
HTML:
<div class="position-img-outer">
<div class="position-img-inner">
<img src="http://placehold.it/1000x300" class="position-img" alt="img" style=" height: 300px; " />
</div>
</div>
CSS:
.position-img-outer
{
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.position-img-outer .position-img-inner
{
display: inline-block;
position: relative;
right: -50%;
}
.position-img-outer .position-img-inner .position-img
{
position: relative;
left: -50%;
}
If you know the width of the images, you can use the following:
#wrapper .header img{
position:relative;
width:2000px;
left:50%;
margin-left:-1000px;
}
UPDATE:
To avoid a horizontal Scrollbar, you can set the container element to width:100% and overflow:hidden
#wrapper .header {
position:relative;
width:100%;
overflow:hidden;
}
I have a main div, and three divs inside of it. They are all given a width 30%, and they are all centered within the main div.
I used display: inline-block; so that the three divs appear next to each other, but when I give them a height of anything, the two left-most go down a bit, and the right one stays where it should. All that's inside the divs is just simple inputs, nothing that could dynamically increase the div's size.
How should I fix this?
It's quite hard to work out the issue without any live code but give these a go. For the DIVs inside the main DIV, assign the class vertical-align:top
Another option (or as well as) is to set the line-height to the desired height rather than the height.
If you have no luck with these, I suggest you put your html and css up on jsfiddle.
Yes. the three inside divs must be floated to the left so that they should align exactly. without floating, they can create problems in different browsers.
CSS Code
#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}
HTML Code
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner" style=" margin:0;"></div>
</div>
Here's a working solution. http://jsfiddle.net/j3zjg/
<style>
#container{
width:500px;
height:300px;
border:1px solid red;
}
#container div{
width:30%;
float:left;
height:40px;
background:red;
margin-right:5px;
}
</style>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
I want this design:
DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
How do I solve this problem? I've tried stuff like floating left & right, but I just can't get them on the same line.
I want the div 2 to always be there, and the div1 to have a max-width of 40em, but resize to allow the div 2 to show at all times if its necessary.
My code:
<style="text/css">
#mainbulk {
padding: 1.5em 2% 1.5em .5em;
}
#ads {
width: 7.5em;
float: left;
display: table-cell;
padding: 0 0 0 2em;
}
#textcontent {
width: 70%;
float: left;
display: table-cell;
}
</style>
and
<div id="mainbulk">
<div id="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
<div id="ads" align="right">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
</div>
I'm encountering this problem:
http://www.screencast-o-matic.com/watch/c6lrXsXyQ
Try the following. ids are used for unique content and should be used once only per page.
Also tables are still worth considering in some circumstances. Using borders on your divs while you are working on the layout will also help (red and green borders below).
<html>
<head>
<style type="text/css">
.textcontent {
float: left;
border: 1px solid red;
width: 700px;
margin-bottom: 4px;
}
.ads {
float: left;
width: 120px;
border: 1px solid green;
}
.textcontent:before {
clear: left;
}
</style>
</head>
<body>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
</body>
</html>
Not really sure what you're after, but you can try what I've done here. You should only use an id on a unique element in a document, so if you want more than one, re-assign them as classes. display: table-cell; is not needed here.
HTML:
<div class="mainbulk">
<div class="ads">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
<div class="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
</div>
CSS:
.mainbulk {
padding: 1.5em 2% 1.5em .5em;
border: 1px solid #000;
}
.ads {
width: 7.5em;
float:right;
text-align: right;
border: 1px dotted #f00;
}
.textcontent {
max-width: 40em;
float: right;
border: 1px dotted #00f;
}
I believe I can help!
What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.
Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.
What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.
The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.
There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .
This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!
I have one horizontally div on the top of my page with a height of 50px.
And now I want to put another div right below it which will fill the rest of entire page (should work with any kind of resolution).
Does anyone know how to do this only with CSS?
I'd appreciate any help. Thanks!
Although this is not stacking the div's it is very simple solution. Make a div that is 100% height and then place a div inside that is 50px in height.
<body style="height: 100%; width: 100%;">
<div style="height: 100%; width: 100%;">
<div style="height: 50px; width: 100%;">Header</div>
<!--Rest of Content-->
</div>
</body>
There are ways to do this. Here is an example using absolute positioning and a wrapper. Obviously ignore the colors-- they're just there so you can see what's going on.
<body style="margin: 0;height: 100%; background-color: yellow;">
<div style="background-color: green; height: 50px">top stuff</div>
<div style="position: absolute; top: 50px; bottom: 0; left:0; right: 0; background-color: blue">main stuff</div>
</body>
This is an example of a layout that is somewhat problematic with "pure" CSS but trivial with tables.
Firstly there is no way of expressing (ignoring CSS expressions, which you tend to want to avoid) "rest of the page" or "100% minus 50px" so the general solution to this problem is.
Create a container that is 100% height;
Put the header at height 50px;
The content simply takes up the rest of the space. Any styling is applied to the container not the content.
So:
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
with:
html, body. #container { height: 100%; }
#container { height: 100%; min-height: 100%; }
#header { height: 50px; }
It gets trickier if you want a footer. That is typically positioned absolutely at the bottom and padding is used on the container so nothing appears under it.
here is my css:
html {
height: 100%;
}
body {
height: 100%;
width: 300px;
margin: 0px;
}
div.div1 {
height: 100px;
background-color: red;
}
div.div2 {
background-color: blue;
height: 100%;
}
<div class="div1"></div>
<div class="div2"></div>
the problem is that I want body to be float-based but without scrolling inside it.
The doctype is sctrict. Browser: ff3. Is it possible?
you can add one more div in div2 to display content in it.
actually that div will have 100px top margin to avoid top div overlapping on your content.
div2 will extend from top to bottom but top 100px won't be used by content div.
so trick is, keep div1's height same with content's top margin. then it'll be fine
html:
<body>
<div class="div1">div1 div1 div1 div1</div>
<div class="div2">
<div class="content">
<div2 test <br/>
<div2 test <br/>
<div2 test <br/>
<div2 test <br/>
</div>
</div>
</body>
and css will be something like:
html,body {height:100%;width:300px;margin:0px;}
div.div1 {height:100px; background-color:red; position:absolute; width:300px;}
div.div2 {background-color:blue; height:100%;}
div.content {margin-top:100px; float:left; width:100%;}
if you want to hide scroll completely just add overflow:hidden to div.div2
also you can give same background color to container make div2 look seamless.(it wont extend after scroll.)
div.content {margin-top:100px; float:left; width:100%; background:blue;}
cheers