CSS Float and Width - html

I'm wondering why adding a "width" element to a box is destroying the effect of "float".
For example, when I have
.login form {
float: right;
background-color: green;
}
All elements shifts to the right and the background color only encircles the elements that are there (it does not create a green bar at the top of the screen as I want). I figured I could ameliorate this problem by setting a width,
… width: 800px; …..
but although I get a green by striping the top of the screen, all of my box elements seem to float to the left, so I have a green bar with login elements at the left and not the right.
Could someone please tell me how to take my .login box element, justify all of the five attributes that it has to the right (textfields, boxes, and a button), and still have a green bar at the top of the screen even where there is just blank space.

trying it with padding-left:(something px) ; instead of width: 800px; will probably fix this problem
What is likely causing this problem is that you're using the full capacity of the overlaying div, this makes it useless to float-right since there is nothing left to float away from

You can even put to the container: overflow:auto; or you can you the clearfix method found here.

Related

CSS positioning and offset in fluid layout

I have a wrapper div with some content in it. Here is its css:
.wrapper{
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto;
padding: 0.3%;
}
Now, within this div, I have another div, which I will call div2. It has no relevant styles to it, aside from cosmetic ones (background, font-color, etc.). Its behaviour is to simply take up the entire width of the wrapper div, no matter what the browser's width, zoom, or screen size is. This is as expected, and nothing is wrong here. I'm trying to make an addition onto this, and that is where I'm having trouble.
I have an image that I want to display, such that the bottom of the image is in line and touching the top of div2, and on the right side end of div2, so that the right end of the image is also in line with the right end of div2.
This would sound simple enough to do, but I don't want this image to mess with the vertical space. Adding the image in will of course introduce a larger gap between div2, and any element above it, which means I have to use position:absolute to take the image out of the regular flow of the page. However, my attempts at keeping the image at this same position, in line as described, have been unsuccessful. How can I keep this image aligned at all times, and under all possible user display circumstances, without having this large gap?
I've tried using the offset CSS top and left to move the image, but it doesn't work for all screens/zooms/resolutions/browser widths, and this isn't something I can practically use media queries for.
I'm not quite sure if I got you right, but I guess you need to:
#div2
{
position: relative;
width: 100%;
overflow: visible;
}
#div2 img
{
position: absolute;
bottom: 100%;
right: 0;
}
EDIT: Place your image inside of #div2.
So, your image, will always be on the right top of #div2. That's what you wanted to do?

my nav and div won´t be a side, don´t know what's wrong

At this link:
http://thom239u.keaweb.dk/help/mit.html
i have a div called main (black border) and a nav (red border)
i have tried everything, why ain´t they a side
when they are empty they are side by side,
but when i put something in them they split.. ?
i tried to erase it all and start from beginning again, but wont help..
![enter image description here][1]
i'm trying to get i nav a left an a div box where i can change what's in it.
Please add
vertical-align: top; to #main
You should use float:left;
You can add that to the <Nav> and <Div id="main">
You're looking for
vertical-align:top;
Additionally, under the standard box model, they will not correctly align side by side at lower resolutions if you use width % and have a border/padding. You are using width:10% and width:89% for each element, I'm assuming you were trying to make them fit and 10%/90% wasn't working.
If you apply box-sizing to each of the elements, it will take into account the extra width allocated to borders/padding of that element, and allow you to simply state 10% width & 90% width.
You need only vertical-align to #main, since display:inline-block elements need to be aligned.
#main{
vertical-align:top;
/* other styles*/
}
whats-the-deal-with-display-inline-block

How can I get things properly contained in a wrapper div?

At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy

html body is displaying left aligned but in css it is set to centered

I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }
​

How to move div lowered from edge of page

Here is a jsfiddle http://jsfiddle.net/Jw6kU/2/ of what i have right now. The thing i need to do is drop the white box and the text in that div tag ("left") down so it is center in the green bar at the top (67px tall). How can i easily do this? Sorry this is sloppy, the work was done fast.
This is a second post. The first one i messed up by pasting the wrong link. Sorry.
Using the margin-top css property would give the div space from the top of the page. You'd have to find the right amount of pixels and test it out fully but I think that will help.
I added this to the css of your fiddle and got the white div at the top in the center of the green div under it.
#left {
margin-top: 9px;
padding-top: 12px;
}