This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have a page with several divisions. The first 3 take up the entire width of the page from the top down 170px. This is followed by a line break and then the fourth division, which should be displayed below the previous divisions. Instead, it is being displayed at the top of the page, underneath the 3 divisions. I've checked and rechecked to make sure the divisions all close properly, but this isn't the problem. I will post relevant code below, CSS first and then HTML as I am using a separate style sheet.
#banleft
{
padding-top: 20px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
float: left;
text-align: center;
width: 200px;
height: 170px;
}
#bancenter
{
padding-top: 20px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
float: left;
text-align: center;
width: 600px;
height: 170px;
}
#banright
{
padding-top: 20px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
float: left;
text-align: center;
width: 400px;
height: 170px;
}
#nav
{
background-image: url(../media/purplemenubar.jpg);
background-repeat: no-repeat;
padding-top: 3px;
padding-left: 30px;
padding-right: 90px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
width: 1150px;
height: 25px;
}
<div id="banleft">Content </div>
<div id="bancenter">Content </div>
<div id="banright">Content </div><br>
<div id="nav" class="cambria3black">Content </div>
Worth noting: I've tried removing the class from the final div, but that doesn't help. Also, when I put actual content inside the "nav" div, it displays in the proper place on the page. It's just the background image of the division that is floating up to the top and behind the other divisions.
Add clear:both to the #nav's styles.
Alternatively, consider using display:inline-block instead of float:left.
Related
Maybe someone can help me out. I am working on a mock web page in WordPress and I am running into a small issue. Two of the divs are centered on my 17in PC screen but when I look at them on a desktop, they are the only two divs that are not centered on the screen and are not responding when I shrink a window down. The two divs / classes that I am working with are .headerwrap and .ibanner.
Here is the code for just the .headerwrap:
.headerwrap {
display: block;
min-height: 88px;
background-color: #FFF;
width: 1200px;
position: relative;
margin-left: 185px;
vertical-align: middle; }
and the .ibanner is:
.ibanner {
display: block;
width: 100%;
background-color: #95C837;
text-align: center;
position: relative;
overflow: hidden;
margin-top: 20px; width: 1200px;
margin-left: 185px;
box-shadow: 10px 10px 5px grey;
vertical-align: middle; }
The website is: http://bitlamp.wctc.edu/~ktepp/StellarBlueTechnologiesTest/
Can anyone tell me what I am doing wrong and how to fix this?
Thank you in advance!
#searchInput {
width: 50%;
height: 40px;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
top: -12em !important;
left: 1em !important;
}
I can't get this div to stay centered in my mediawiki wiki. Is there a way to do this? The code above doesn't do anything. It just stays in place. I have applied what I know in previous post, and it still doesn't work for certain divs.
I am facing a same problem. I'm trying to create two separate rows (marked as red background color) to be aligned horizontally in the center. One of the row on the left side of center part, and second one on the right side of the center part.
Do I need to add something or change some values? I've been trying to do this for 2 hours now.
Any help will be appreciated. Thank you :)
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px auto;
height: 300px;
width:50%;
display-inline-block;
text-align:center;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
Worked for me just by removing float:left; and add display:table-cell; to .others p.
Fiddle
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:table-cell;
}
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:inline-block;
}
i think you shouldnt use <p> for positioning.
use <div> instead.
also using float:left or float:right might solve your problem.
Read up on using floating items here:
http://www.w3schools.com/cssref/pr_class_float.asp
Also, when using floats, browsers will assume there is nothing inside your 'container' <div>.
So i'd also suggest you read up on using css attribute overflow.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
.others
{
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
#leftside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: left;
background-color: red;
}
#rightside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: right;
background-color: green;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
You just need to provide to p a width value because you are floating the p elements to the left, every p element into the container will get out of the normal document flow and flow from left to right.
Just add width: 50% to every p element. like this:
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
width:50%;
}
Also provide a clearfix or overflow:hidden; to the .others in order to contain the floated elements within it's body.
Here is a demo to work with
Edit: Almost forgot. If you want to gain control onto your layout, provide also a min-width and a max-width value to the body container, so it doesn't strech to much on wide screens, nor it is contained to much on narrower screens. Also, try a css framework, like bootstrap. It will give you fine control onto your layout.
Cheers!
I'm working on a blog layout, where some info (blue box) is taken out from the post's body like this:
http://jsfiddle.net/rhr96/
What is the best of doing that?
Currently I'm doing:
position: absolute;
margin-left: negative value;
to flow the blue box to the left.
But I could also do:
position: relative;
float: left;
right: some px;
Any of these considered better? Or are there any other method?
Short Answer: POSITION ABSOLUTE
Reason: Designers use position: absolute because that is the right way to take out the element from the normal document flow, using float: left; wont take out the blue box out of the document flow...
Edit: Just understood what you actually wanted, here I've made a new 1, you can check it out..
Demo
HTML
<div class="container">
<div class="block">1</div>
<div class="content">This is a question</div>
</div>
CSS
.container {
height: 200px;
width: 500px;
border: 1px solid #eeeeee;
margin: 30px;
position: relative;
font-family: Arial;
}
.block {
position: absolute;
height: 80px;
width: 60px;
background-color: #eeeeee;
top: 10px;
left: 10px;
font-size: 36px;
text-align: center;
}
.content {
width: 410px;
float: right;
margin: 10px;
font-size: 18px;
}
I think the best way of doing this, may actually be this (well, I say best, I guess that's a matter of opinion in most cases)
HTML:
<div class="container">
<div class="outside">
hi
</div>
<div class="inside">
<p>Blah blah blah</p>
</div>
</div>
CSS:
.container { margin: 20px auto; width: 400px; }
.outside { background: #d8d8d8; float: left; margin: 0 5px 0 0; padding: 5px; }
.inside { background: #000; color: #fff; margin: 5px 0; overflow: hidden; }
Obviously you can repeat this multiple times on the same page (as I imagine you may if this is for blog posts)
EDIT: My answer uses floats to take the element out of the normal flow, the use of overflow: hidden on the content means that it doesn't wrap underneath the floated element.
(If you don't know much about overflow I'd suggest reading about it, it can be useful for all sorts of things, e.g. float clearing)
I'm having trouble getting my layout working correctly, I have a main div and a sidebar div these are both float: left if the screen size is resized or if its viewed on screen smaller that what I have designed on (1920x1080) then the sidebar div drops below the main content.
I tried placing a wrapper around each div, but this has no effect.
<div id="header">
[Header]
</div>
<div id="content">
[Content]
</div>
<div id="sideBar">
[SideBar]
</div>
<div id="footer">
[Footer]
</div>
body
{
width: 100%;
color: #000000;
background-color: #000000;
margin: 0;
padding: 0;
}
#header
{
width: 100%;
height: 110px;
background-color: #336699;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#content
{
float: left;
margin-left: 50px;
width: 70%;
height: 700px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
margin-bottom: 40px;
}
#sideBar
{
float: left;
margin-left: 50px;
width: 15%;
height: 400px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
}
#footer
{
width: 100%;
height: 80px;
background-color: #174555;
margin: 0px;
padding: 0px;
color: #ffffff;
clear: both;
}
Basicly both div's should resize until a certain size is reached, then scrolling should be enabled. I'm pretty sure I have done something simple wrong but i'm not much of a design person.
Example can be shown here : Link
Thanks for any advice :)
Karpie's right.
Also why not simply start out with one main div, say measuring 1000px in width, then work within that? If you can't do that then choose a measurement type, like px, and stick with for the widths, padding and margins of those elements. At least that would make it easier to do your math and know how much space you do or don't have.
I generally stick to relative measurements, like pixels (I don't like absolutes, it's personal. :P).
EDIT
Ok, try this, add a wrapper around the entire page (just to test, so bear with me). Give that wrapper an id of like #main-body or something, and define a width. Set the widths of the content and sidebar. If you minimize the screen, the sidebar shouldn't fall below the content div. It wil go outside the view port, though.
/* Wrap all in #main-body with specified width */
#main-body{
width:1000px;
margin:0 auto;
}
/* give these elements a relative width */
#content
{
float: left;
margin-left: 50px;
width:600px;
height: 700px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
margin-bottom: 40px;
}
#sideBar
{
float: left;
width:100px;
margin-left: 50px;
height: 400px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
}
Sorry for the length of this. :P
You're mixing up percentages and pixels. 70% width + 30px padding + 50px margin (all on content) + 50px margin + 15% width + 30px padding (all on sidebar) can add up to more than 100%.