I'm making a website and trying to create a login box. I have a website with two boxes of content, and I want to add a third "login box".
However, I can't seem to do this, because it appears above (when I have the current width of the container) or above (when I increase the width of the container to accommodate for the increase of space because of the box).
Also, margins don't seem to be affecting the newly created box either.
Here is what I want it to look like: http://i.stack.imgur.com/Kmm1g.jpg
And here is the current website: http://www.winterlb.com/
So my question is, what is the easiest way to accomplish this? Thanks.
You can put your login box and your nav box in the same div. Float this div and the main content div like so:
HTML:
<div id="navBar">
<div id="loginBox">
...
</div>
<div id="navBox">
...
</div>
</div>
<div id="mainContent">
...
</div>
CSS:
div#navBar {
float: left;
width: 200px;
}
div#mainContent {
float: left;
width: 600px;
}
Add the 'third box' inside your 'sidebar' and add another div to wrap your original sidebar content.
Style the approriate login div and navigation div. Float them left if needed.
Here's a sample html of what the structure should look like http://pastebin.com/3hLmGzRZ
You will never accomplish this properly without a doctype. You are in quirks mode. Add this to your first line and then see where we are:
<!DOCTYPE html>
Related
Okay, so this is going to be hard to explain, so please ask questions if I am not clear
In my html page, I have a main "container" div that has multiple divs within it, but each of the divs inside the container are placed into one of two columns (so if there is a div in the container, it is either in the left column or the right column)
<div id="container">
<div id="column1">
<div id="item1-1"></div>
<div id="item1-2"></div>
<div id="item1-3"></div>
</div column1>
<div id="column2">
<div id="item2-1"></div>
<div id="item2-2"></div>
<div id="item2-3"></div>
</div column2>
</div container>
[NOTE: I know the syntax is incorrect, I am just making it easier to read]
So, in other words, I want two columns of divs that can vary in size (so the page size can vary), and so that item1-2 appears below item1-1, etc. The problem here is I want the divs in the container to appear inside of it, so I cannot use absolute or relative positioning. Something is telling me I should be using a table, but I am not sure how to go about doing this.
So, my question is: using only html and css, is there any to do exactly what is above?
First: make </div column1> and </div column2> just say </div>
Second: CSS:
#container {
width: 100%;
}
#column1, #column2 {
float: left;
width: 50%;
}
To achieve the look you want you should use CSS float property. However, to avoid problems with parent container not displaying correctly, consider following one of the two possible solutions:
Adding a div after floating elements with
clear: both
or applying code below to your parent div
overflow: hidden
Basically what I have is an HTML page with a "main content" block, if you will. All main content for that page goes in the div I have for it. What I want is to have a column with more stuff to the right of it, but whatever I try to do it always ends up going either below it or in some random place. Here is the code for my page, if anyone could help guide me through it that would be awesome.
HTML: http://pastebin.com/Hh2TNGdj
CSS: http://pastebin.com/ZCEJkFmH
Thanks.
You were probably close... putting in your new div straight after #pagecontent, and floating it right, then floating the #pagecontent div left, will allow them to sit side by side.
Note that the next content (footer, for instance) will need to be cleared properly so it won't overlap your floated divs.
I would switch to using HTML5 tags, personally. If I were to do something like this, I would go with code along this line (untested):
<div id="wrapper"> #wrap both sections in a container
<section id="left">Left Section</section>
<section id="right">Right Section</section>
</div>
For the CSS, you can do something like this:
#wrapper {
width: 1000px;
height: auto;
}
#left {
width: 500px;
height: auto;
float: left;
}
#right {
width: 500px;
height: auto;
float: left;
}
Some important things to remember. If you add padding, subtract that from the width (if padding is on both left and right, subtract padding x2). On your footer, put clear: both.
Hope this helps you out.
Here's a fiddle: http://jsfiddle.net/n6D7U/
new div #aside,
both columns are floating with fixed width (700+20+240 pixels here),
last CSS rule is there because parent has only floating children and thus no more content in the flow to push down the background...
I think this should work:
<div style="padding:20px;">
<div id="pagecontent">
<span class="main-content-font">
The title of this page goes in the gray box above. This is the homepage, you can put <u>anything</u> here (the main content of your website
which has some neat features and explains what your site is about should go here)!<br />
<br>
Content, content, and more content!<br />
<br>
Try to make it fill up as much space as possible, making the page longer. Don't fill it with useless junk, just anything
you can think of that will benefit the page.
</span>
<span class="whatever">
some things
</span>
</div>
</div>
I haven't tried it, but making main-content-font a span will not add a newline, so the whatever span will be placed to its right.
At the top of my page I have a div that spans the page, and inside that I want the login form to appear on the right side of the browser window. If I do this:
<div>
(masthead stuff)
<div id="topLogin" style="position: absolute; right: 4px; top: 4px">
(login form goes here)
</div>
</div>
That works, but the height of the parent div is not computed to include the size of the login form. I see a javascript/JQuery solution here, but before I do that is there a better practice for getting this done?
You can float it to the right.
You can use:
<div id="topLogin" style="float: right;">
(login form goes here)
</div>
Edit:
In your case use a style sheet as recommended for re-usability across your site:
<style>
#topLogin { float: right; }
</style>
<div id="topLogin">
(login form goes here)
</div>
You can use float:right; and you can use padding / margin to work with your spacing.
This is what I want my page to look like:
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
I'm not quite there yet. Here's where I'm at:
http://labs.pieterdedecker.be/test/test.htm
I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?
You can fix the menu by just adding 2 CSS style rules:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.
try including clear:both in the body div.
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
good luck! ;-)
Simply add the below code:
<div style="clear:both; margin-left:20px;">
after the line:
<div id="body">
That is:
<div id="body">
<div style="clear:both;">
More info about the clear property.
Also, have a look at good tutorial:
Div based layout with CSS
the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.
to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.
the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.
I am trying to push my sidebar to the right of my page. When I do this my division gets pushed to the bottom of the page. Why is this?
Here is my page:
link text
It is because You use something like
<div id="Main">
<div id="content"></div><div id="sidebar"></div>
</div>
note that Div is a Block element.
You have 2 option to correct this issue. use from an inline element like span (instead of content andsidebar ) or convert div to an in-line element with css like
#sidebar, #content
{
display: inline-block;
}