xhtml css floats etc help - html

I'm really thinking of going back to tables because this is just #¤€&/#£ always something....
<div style="float: left; width: 20%">
#1 <a>SmokA</a><br />
<small>Admin</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
I would buy a boat
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
<div style="float: left; width: 20%">
#2 <a>BusHka</a><br />
<small>Old school</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
#1 is stupid
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
This gives:
http://i29.tinypic.com/2iawh83.png
A huge space in the first div. why? it dont if theres more than 10 comments for some reason
ignore the stupid comments

I would be careful about having width of 20% and 80% expect to fit on one line: if there is any padding or border they won't. It looks the way it should in ff 3. :D

Pasting your HTML into the body of my generic testing-HTML-code-from-Stack-Overflow file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Test</title>
</head><body>
<!-- Rebadow's code here -->
</body></html>
shows no problem. Your problem must lie elsewhere, like in your CSS for instance.

if you are using IE6 using 20% with 80% with will often cause the line to overflow, i usually use 20% 79% and you should be ok
to see if it is something overflowing try adding overflow:hidden to the divs and see if they line up, if so you know its something overflowing.
have you used firebug or another inspection tool to see what the heights and widths actually are?

Try adding a wrapper div around your floating ones. This is just to see if anything above this is affecting it somehow.
<div style="clear:both">
<div style="float: left; width: 20%">
#1 <a>SmokA</a><br />
<small>Admin</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
I would buy a boat
</div>
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
Also I wouldn't make a div just to display a line, but that's another issue entirely. Maybe try a HR tag, or wrap that div around everything, this is just to make the code make more sense structurally.

Related

How to place text below boxes

I have placed two boxes next to each other and now I want to place some text directly underneath the boxes. The HTML/CSS I have so far keeps placing the text in the top right corner of the right hand box. Any suggestions?
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Use display: inline-block; on <span>.
Like:
span {
display: inline-block;
}
Have a look at the snippet below:
span {
display: inline-block;
}
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Hope this helps!
Here's a better version, with the actual boxes next to eachother, instead of inside eachother and moved via margins.
<div id="one-off-pricing" style="width:800px; overflow: hidden;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float: left;margin-top:20px;">
</div>
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;display: inline-block;margin-top: 20px;">
</div>
</div>
<p style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
Try this
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;clear:both;display:block;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Try this (and see the notes and explanations below):
.one-off-pricing {
width: 800px;
}
.one-off-pricing div {
display:inline-block;
width:370px;
height:400px;
border:1px solid #cecece;
}
p {
font-weight:bold;
}
<div class="one-off-pricing">
<div></div>
<div></div>
<p>*If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
</div>
1) Why put all the inline CSS in a stylesheet?
It massively helps with scaling and maintenance.
2) Why use a class for "one-off-pricing" instead of an id?
When CSS selectors start to get long and complex, ids in long chained selectors can mess things up. For this reason it's often (not always but often) better to use a class instead of an id.
3) Why use <p> instead of a <span>?
Because the element in question is best described as a paragraph.
4) Why use display:inline-block instead of a float?
Because you simply don't need floats in this situation.

I'm not sure how to move two divs into a sidebar, or how to make a sidebar - HTML and CSS

So I've been building a collection of webpages with mainly HTML only, and I've decided to add a 'Back to start' div at the top, which is linked to the Welcome page. It currently appears above the header and question at the edge of the page, and this makes it push down the rest of the content, leaving a big gap along the top.
In other words, a div is pushing all my content down, when I'd rather have it aligned with the header which is otherwise the usual top of the page.
<!DOCTYPE html>
<head>
<title>Question 5</title>
<div class="leftbox">
<a href="file:///G:/Business/Business%20Sector%20Quiz/Welcome.html">
<div style="width: 80px; height: 40px; padding: 2.5px" float: left>
<p> ← Back to start</p>
</div>
</a>
<a href="file:///G:/Business/Business%20Sector%20Quiz/Question%204.html">
<div style="width: 100px; height: 40px; padding: 2.5px" float: left>
<p> ← Back 1 question</p>
</div>
</a>
</div>
I haven't managed to do this using the method as my CSS formats any divs, so I end up with a long strip down the left side which is formatted.
So what I'm asking is, does anyone know how to move my divs over to the side aligned with the header, or how to get around the div class="left" issue I have? Thanks - Oisin
Note: I apologise if I am being overly vague or not very specific with my question - I'm not too sure about HTML formatting, and about website building. Also, if you need to read some more code or see more about my website, just ask; I still have all the files.
the div with the class .leftbox needs to be floated left since it contains all the anchor links and it is the parent for all header elements
other issues with your html (you have float:left outside of your style)
div style="width: 80px; height: 40px; padding: 2.5px" float: left>
<div style="width: 100px; height: 40px; padding: 2.5px" float: left>
here is a snippet
.leftbox{
float:left;
}
<title>Question 5</title>
<div class="leftbox">
<a href="file:///G:/Business/Business%20Sector%20Quiz/Welcome.html">
<div style="width: 80px; height: 40px; padding: 2.5px">
<p> ← Back to start</p>
</div>
</a>
<a href="file:///G:/Business/Business%20Sector%20Quiz/Question%204.html">
<div style="width: 100px; height: 40px; padding: 2.5px" >
<p> ← Back 1 question</p>
</div>
</a>
</div>
<p>
<h1>
This is the header
</h1>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAvG8n4pH7Awr-5ISF1rif1RQMv8Rko1zTctYDaARiYOCJi4TDhY5ye1w'
</p>

HTML padding-left not working for div

I'm creating a very simple webpage. It has a div tag with a single paragraph containing some text.
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
Here is a the CSS style for the div:
div#titlebox {background-color:#f2f2f2;
padding-top:2px;
padding-bottom:2px;
padding-left:2px; }
Snippet:
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
The text appears correctly, background color is also fine, but regarding padding, only padding-top is applied while padding bottom and left are ignored. Any suggestions on what is wrong with this code? By the way I am new to HTML. I googled the issue, there was point regarding float, but that doesn't solve my problem.
Here's a solution you can try without using css
<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
<p>First Heading</p>
</div>
</body>
Hello I wouldn't criticise you I see you are a beginner, that would just dis encourage you but normal syntax, html,head,body written in simple letters to avoid confusion of reading your own code later
follow this url:
Is it bad to use uppercase letters for html tags?
Your code works fine :)) I simply made padding bigger to make it more obvious
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 100px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
Your left and bottom padding is working but you probably can't see it because 2px is really small. Change it to 20px or something and you should see the padding.
Handy tool - if you are using Chrome, you can right-click on the element you want to inspect and select the Inspect tool to see all your padding and margins on a diagram.
--note-- depending on which browser you are using, there will be some default styles/padding/margin applied to certain elements already, in this case your paragraph tag already have some top and bottom padding

create a line break within a div

I will have 3 icons side by side that will float left when the window shrinks. Under each icon, I'd like to add some text. I can pretty much get it as you can see below.
.icons {
BORDER-TOP: black 1px solid;
HEIGHT: 100px;
BORDER-RIGHT: black 1px solid;
WIDTH: 100px;
BORDER-BOTTOM: black 1px solid;
FLOAT: left;
BORDER-LEFT: black 1px solid
}
<div class="icons">div 1</br><a>some text</a></div>
<div class="icons">div 2</div>
<div class="icons">div 3</div>
In jsfiddle, this </br> tag seems to come up as invalid. Is there a valid and / or better way to accomplish this?
http://jsfiddle.net/kp950/mum68pwv/
Just apply display: block to your text elements.
a { display: block; }
The will force each element to consume the full available width of the container, and subsequent elements to the next line.
http://jsfiddle.net/mum68pwv/4/
You're getting an error thrown in jsfiddle due to your linebreak syntax being wrong.
You're using </br> when you should be using <br/>
2020/HTML5 EDIT
You no longer need to use self-closing tags in HTML5 (though browsers can still handle them), instead you can simply use <br>.
Instead of </br> use <br> or <br />
<br /> is a valid tag whereas </br> is not so.
Use :
<div class="icons">div 1
<br>some text
</div>
<div class="icons">div 2<br>some
<br>some text
</div>
<div class="icons">div 3
<br>some text
</div>
P.S.
<a> is anchor tag and it is not a good option for adding little elements to your webpage. Instead use <span> tag which will be more efficient.
You have a syntax error in your <br> tag
So this
<div class="icons">div 1</br><a>some text</a></div>
should become
<div class="icons">div 1<br><a>some text</a></div>

Overflowing content outside parent div in ie6

The following code:
<div style="width: 50px; border: 1px solid green;">
<div style="position: absolute;">
whatever text you want
</div>
</div>
Renders like this:
in any modern browser(ie7+, chrome, firefox), and like this:
in IE6.
What i would like is for it to render in IE6 just like it renders in the others browsers.
Any ideas ?
Why don't you just put the text outside the div?
<div style="width: 50px; border: 1px solid green;">
</div>
whatever text you want
Or
<div style="width: 50px; border: 1px solid green;">
<div style="position:absolute; width:XXpx">whatever text you want</div>
</div>
Would that work for you?
This is a known issue with IE6. (one of many)
This site discusses the problem and how to work around it: http://www.positioniseverything.net/explorer/expandingboxbug.html