I have this following chunk of my page.
Style:
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}
And example HTML:
<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>
When the page is displayed. the navcontainer is to the right of (as it should) but under the featuredcontainer. When I move the navcontainer up using relative positioning, it looks right, but there is a bunch of empty space at the bottom of the page. What do I do?
Surround your two divs with a "wrapper" div like so:
<div id="wrapper">
<div class="featuredcontainer">content</div>
<div class="lessonnavcontainer">menu</div>
</div>
Then to center them, add margins to the wrapper:
#wrapper { margin: 0px auto; }
Then to have the two divs be side by side, add a float:
.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }
In order for the centering to work, you need to declare a width on the wrapper:
#wrapper { width: 800px; }
Put both the nav and the featured containers into another wrapper div.
HTML
<div class='wrapper'>
<div class="navcontainer">
menu
</div>
<div class="featuredcontainer">
content
</div>
</div>
And get rid of all the relative positioning. Relative positioning is not recommended for basic layout issues like this. Use floats instead. The wrapper should have a fixed width, which allows it to be centered properly with margin: 0 auto.
CSS
.wrapper{
width:752px;
margin: 0 auto;
overflow:auto;
}
.featuredcontainer {
width: 450px;
height: 700px;
float:left;
border: 1px groove grey;
}
.navcontainer{
float:left;
height: 600px;
width: 300px;
background:#ff0;
}
JSFiddle http://jsfiddle.net/5w5SC/
Use the float property. Using float, css can position divs next to each other horizontally.
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}
Thats a starting point, try to use float left or float right and see what happens. Fiddle with it until it looks exactly how you want it.
To get them side-by-side you need to add the float attribute in the CSS. To get them to resize with page width you need to add relative widths to them. To center them on the page (horizontally) you need to put the divs inside a relative positioned div in the html. Here is a fiddle. http://jsfiddle.net/Ne5zs/
Be sure to introduce a clearfix (there are many versions of this technique) on any floated object; then center their containing block element using margin: 0 auto.
Related
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
I have the following (jsfiddle):
<div class="content_wrap">
<div class="left_container">
</div>
<div class="right_container">
<div style="background-color: blue; margin:20px; height: 1500px;"></div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
CSS:
body,html {
height: 100%;
width: 100%;
background-color: #f8f8f8;
}
div.content_wrap {
width: 100%;
height: 100%;
}
div.left_container {
float:left;
width: 220px;
height: 100%;
background-color: red;
}
div.right_container {
position: relative;
padding: 15px;
padding-top: 100px;
width: 1000px;
}
.clear { clear: both; }
​What I'm trying to do is line the divs side by side and have the left side bar (red) stretch to either the height of the page, or the height taken up by the content (which is in blue), which ever is greater (like the layout shown here)
My problems at the moment are:
The content of the right container (The blue box is just to illustrate content) does not align properly next to the left container
The left container doesn't adjust its height according to the content of the right container.
I've put in a clear fix, although to be quite honest, I don't completely understand how that works.
Would appreciate some guidance.
See this demo: http://jsfiddle.net/PaJ3r/9/
Here is updated CSS for it:
body,html {
height: 100%;
width: 100%;
background-color: #f8f8f8;
}
div.content_wrap {
width: 100%;
position: relative;
}
div.left_container {
float:left;
position:absolute;
width: 220px;
height: 100%;
background-color: red;
}
div.right_container {
position: relative;
padding: 15px;
margin-left: 220px;
padding-top:100px;
width: 1000px;
}
.clear { clear: both; }
position:relative in div.content_wrap is needed in order to get left sidebar stretched to the height of content.
position:absolute; in div.left_container allows left container to fit height of wrapper div.
In div.right_container there is margin-left: 220px; which leave left sidebar visible
Please take a look at this jsfiddle.
So few remarks: I used float: left; on both divs and also, as bart said, you didn't use the correct name for clearfix.
First you should nest your div's so that the left div can grow with the right one.
See updated fiddle
For the left div not set the height, but the min-heigth to 100%. Furthermore you need to play around with margins and paddings to get the last bit ok
My site has a 900px div #content that is centered with margin-left: auto and margin-right: auto. I have an image that I need to display behind the div which will partially overlap #content.
The image is set to display as block at present and I can get it to where it needs to be, but it doesn't allow #content to draw over the image. I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center.
My current positioning, which gets it where it needs to be is:
img#watermark
{
margin-left: auto;
margin-right: auto;
display: block;
padding-left: 900px;
}
#content just needs to appear over the watermark.
Help greatly appreciated.
html:
<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>
css:
div {
margin:auto;
width: 512px;
height: 512px;
background: rgba(0,0,0,.4);
position: relative;
}
img {
position: absolute;
left: 50%;
margin-left:-256px;
}
http://jsfiddle.net/Db2cw/
the solution is to have a surrounding div on the #content div, and that surroinding div positioned absolutely and with a defined width and height.
Ex:
html:
<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>
CSS:
#outter {
width: 1000px;
height: 300px;
position: relative;
}
#image {
width: 1000px;
height: 300px;
position: absolute;
}
#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}
#content {
margin: 0 auto;
width: 900px;
}
Example here: http://jsfiddle.net/qwEhv/
"I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center."
What you might need to do here is to have an additional div - call it #contentWrapper for example and center it using margin-left and right, set position to relative. Put div #content inside the wrapper div and position absolute. This should allow you to make #content look centered.
I want to have a login form centred on the page. An example is here
I know how to centre an element what I can't work out is how to centre an element always in the centre of the page even if the browser window changes size
Classic problem. Here's some example CSS:
#your_element{
position: fixed;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
Important bit: the negative margins should be half of the respective dimensions.
Add position: fixed; to it's style. If you know how to center it, then just adding this should do the trick.
Have a look here for more info: http://www.w3.org/TR/CSS2/visuren.html#choose-position
I keep this template HTML just for this situation, when I need a container that is vertically and horizontally centered:
CSS:
html, body {
height: 100%;
}
body {
background: #ffc;
margin: 0;
padding: 0;
}
#vertical-center {
float: left;
height: 50%;
width: 100%;
margin-top: -185px;
}
#content {
background: #ffffde;
border: 2px dashed red;
clear: both;
margin: 0 auto;
padding: 10px;
height: 350px;
width: 500px;
}
HTML:
<div id="vertical-center"></div>
<div id="content">
<h1>Centered Content</h1>
<p>This content is centered on the page.</p>
<p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>
Note that the #vertical-center has a margin-top that has to be half the height of the #content div, and it has to be negative.