Hi,
How does one add a DIV element into a line, without the 1st DIV causing a new line break occurring?
For example I want these 2 elements to be next to each other, that is in the same line:
<input type=“text” name=“kw” size=“30” maxlength=“120” class=“search-box”>
<input type=“submit” name=“submit_search” value=“Search” class=“f_buttn”>
ThanX,
Simple - just put those two elements in the code next to each other. No need to put them in separate <div>s.
I am sorry, I gave the wrong example.
I meant to say how do I put 2 DIVs next to each other without one causing new break line.
ThanX
You need to float one or both of the divs to place them side by side. They’ll also need to have widths specified since the default width for a div is 100%.
Not when you float them; floated elements “shrink wrap” to be as wide as their contents (the content’s outer width that is, including padding, etc).
Another option would be to put display: inline; on the divs.
Why do you want to have two divs next to each other? I’m asking because it could be that div might be an inappropriate element choice to start with in your situation (and e.g. span could be better).
So where the content is text and normally wraps to multiple lines anyway it will shrink wrap to 100% width.
Only where the content is text that fits within the desired width on one line or is a single image or something else which would specifically leave a gap alongside would it shrink wrap to less than 100%.
In the case of two input fields it would shrink wrap to the combined width of the two fields.
In most cases you will need to specify a width in order to get the div to display at the width you want.
Fair enough. I assumed the divs would only have a small amount of content, but you make a valid point. Indeed if there’s a lot of content in them you should specify a width 
Hi,
ThanX
display: inline;
does the Job.
BUT, the Width in the associates div is not working!
Why is that?
Example here:
Do something about it - help get the real news out
Please look that footer area, that is where you see:
About Us | Report | Advertise | Donate | Contact | Legal Notices
each one of these items is a DIV, kept in same line via command you suggested, but now the Width is not working at all, so rather than all elements having the same Width, each has a Width based on size of the element!
ThanX,
You can’t set a width on inline elements, use float; left instead
As Remon said you will need to float the elements if you want dimensions applied (or use display:inline-block for the anchors).
Your footer is badly constructed anyway and you should just be using a list as follows:
e.g. like this:
<ul class="footer">
<li><a href="about_us.php?PHPSESSID=jc1u9ivoibb7jqb02mhmg97kk0">About Us</a>|</li>
<li><a href="report.php?PHPSESSID=jc1u9ivoibb7jqb02mhmg97kk0">Report</a>|</li>
<li><a href="advertise.php?PHPSESSID=jc1u9ivoibb7jqb02mhmg97kk0">Advertise</a>|</li>
<li><a href="donate.php?PHPSESSID=jc1u9ivoibb7jqb02mhmg97kk0">Donate</a>|</li>
<li><a href="contact.php?PHPSESSID=jc1u9ivoibb7jqb02mhmg97kk0">Contact</a>|</li>
<li><a href="legal.php?PHPSESSID=jc1u9ivoibb7jqb02mhmg97kk0">Legal Notices</a></li>
</ul>
ul.footer {
list-style:none;
margin:0;
padding:0;
width:100%;
overflow:hidden;
}
.footer li,.footer a{
float:left;
width:120px;
line-height:2em;
}
.footer a{margin:0 5px;width:100px}
.footer a:hover {background: #fff;line-height:2em;}
Why are you doing things like this?
<div class="space">
<div class="tag">
You have an empty div (with a missing closing tag anyway) on which you are just applying a margin top and bottom. You could have applied the margin top and bottom to the existing element called .tag instead and remove the redundant div altogether. However that is also another section that should be a list anyway and you only need a class on the parent as in my .footer example.
Of course the table wrappers should not really be used either but that is another topic.
Hi,
I just adopted your suggestions - easy
And I am reviewing your other suggs.
I tell you I am not that much of a CSS expert.
But working on that.
ThanX.
As long as you try that’s the main thing Expertise will come later 
Not really – as in it being another topic – the entire page from top to bottom is outdated/bogus/broken markup and methodologies… so if your going to fix one thing, you might as well fix the ENTIRE thing.
Strict doctype, so what’s with all the properties that don’t even EXIST in STRICT like bgcolor, border, and tags that don’t exist like FONT? LINK goes in HEAD, so what’s it doing in the middle of a table? Much less in an invalid spot since the only thing that should really go after a </tr> is a <tr> or </table>.
NOT that as you noted there should be ANY tables on that page, and even when using tables for layout there is NO reason for there to be more than ONE table, where this has FIVE.
… and that’s before we talk bold tags doing numbered heading’s job, paragraphs near (or should I say around) non-paragraph elements (should be around with that XHTML doctype), classed DIV doing numbered heading tag’s job, etc, etc, etc…
A more suitable HTML for a page like that would be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Do something about it - help get the real news out
</title>
</head><body>
<div id="pageWrapper">
<h1>
The Real News Post<br />
<small>
An online News magazine, powered by the Social Network, to get the TRUTH out™
</small>
</h1>
<ul id="mainMenu">
<li class="home"><a href="/">Home</a></li>
<li class="report"><a href="do_something.php">Report the News</a></li>
<li class="signup">
(<a href="http://www.sitepoint.com/forums/index_login_form.php" class="lbOn">Sign-In</a>) /
<a href="http://www.anoox.com/news/sign_up.php?type=rnp">Sign-Up</a>
</li>
</ul>
<hr />
<form action="search.php" method="post" id="searchBox">
<fieldset>
<input type="text" name="kw" size="20" maxlength="60" class="text" />
<input type="submit" name="submit_search" value="Search" class="submit" />
</fieldset>
</form>
<hr />
<div id="contentWrapper"><div id="content">
<h2>Do something about it - help get the real news out</h2>
<ul>
<li>
Are you sick and tired of how right-wing the main stream Media is? Such as labeling something as essential for the well being of the country as Universal nationalized health care to be "Socialism" and will lead to the ruin of the economy when the EXACT opposite is true as evident by the fact that all European countries, Canada, Japan, Australia, Israel, in fact ALL developed nations but some failed 3rd World countries NOT having Universal nationalized health care.
</li><li>
Are you sick and tired of how the main stream Media if not lying one right-wing lie after another engages in Stupid making sensationalism non-sense such as the "Balloon Boy", "Preacher wanting to burn the Koran", "Charlie Sheen.." etc.
</li><li>
Are you sick and tired of how there is little different between Democrats and Republicans, and how insane it is for vast parts of the Media to label the Democrats as being "Liberal" or even "Socialist" when Democrats are to the far right of the Conservative parties in Europe, Canada, etc. given the fact that for example the Conservative parties in Europe, Canada, etc. are 100% for their Universal nationalized health care something that Democrats did not even propose set aside pass.
</li>
</ul>
<p>
<strong>Well then Do Something About it!</strong> That is join and/or support the RealNewsPost Social Network, a Social Network dedicated to getting the TRUTH out, because only by getting the real news out in contrast to the hate-mongering, fear-mongering and war-mongering that comes out of the Main stream (aka right-wing) Media can we hope to address the challenges that face us and thus have a more just and successful economy and a better environment and future.
</p>
<h3>How can I help get the real news out?</h3>
<ol>
<li>
<b>Report the news</b>. Join the RealNewsPost Social Network and report the News. All it requires is having a passion about getting the TRUTH out and being able to write well and back up your writings with FACTS - <a href="report.php">More</a>
</li><li>
<b>Place the free button</b>. Place the free AnooX / RealNewsPost Social Network button on your Web site. Because beside helping to get the TRUTH out you will get FREE Traffic from our Social Network to your Web site for each click on your AnooX / RealNewsPost Social Network button on your Web site for people to arrive at your Social Network - <a href="http://www.anoox.com/free-traffic-new.php">More</a>.
</li><li>
<b>Buy Advertising</b>. Advertising on RealNewsPost / AnooX costs much less than other Advertising venues because we are not-for-profit. So you will increase your Traffic and Sales for the lowest cost of Advertising while helping with progressive causes that we support due to our mission of getting the TRUTH out - <a href="http://www.anoox.com/uc/adv_options.php">Buy Advertising</a> and <strong>SAVE BIG</strong>.
</li><li>
<b>Donate</b>. Although Advertising covers some of our expenses, because we are dedicated to getting the TRUTH out, because we are dedicated in delivering the lowest cost of Advertising, it does not cover all of our expenses. Rest are covered by the generous donation of our members, whether that means you are a member of RealNewsPost Social Network or you enjoy reading the real news on RealNewsPost.com - <a href="https://www.anoox.com/uc/donate_stp1.php?for=rnp">More</a>.
</li>
</ol>
<hr />
<!-- #content, #contentWrapper --></div></div>
<div id="sideBar">
<ul id="sideMenu">
<li><a href="about_us.php">About Us</a></li>
<li><a href="do_something.php">Report the News</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="advertise.php">Advertise</a></li>
<li><a href="donate.php">Donate</a></li>
<li><a href="legal.php">Legal Notices</a></li>
</ul>
<hr />
<!-- #sideBar --></div>
<div id="footer">
<ul>
<li><a href="about_us.php">About Us</a></li>
<li><a href="report.php">Report</a></li>
<li><a href="advertise.php">Advertise</a></li>
<li><a href="donate.php">Donate</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="legal.php">Legal Notices</a></li>
</ul>
© 2010 - 2011 The Real News Post - All rights reserved
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
Which takes that 37k of non-semantic markup and chops it down to 5.6k while adding semantics – EVERYTHING else you are trying to do there belongs in the CSS – if I have time later I’ll toss together the CSS that would generate pretty much the same layout.
Well, without that weird double-border created by the empty TD in yours… or is something supposed to go there?
Which ended up a little something like this:
Do something about it - help get the real news out
as with all my examples the directory:
Index of /for_others/worldNews/take2
is unlocked for easy access to it’s bits and pieces.
I took some stylistic liberties as I wasn’t exactly sure where you were going with the appearance, and many of the things like the white on grey were problematic from an accessibility standpoint. (as in illegible). I also put the rounded corners on everything (though usually I would advise against using CSS3)… Biggest change is I opened it up to semi-fluid from 800 to 1152 (no more of that fixed width garbage), and used EM’s for just about everything so it resizes well for people who don’t like illegibly tiny content.
Ends up 5.95k of HTML, 4k of CSS, valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the CSS3 corner properties and some legacy IE ‘workarounds’.
I didn’t test on legacy browsers as I’m on the laptop, but it checks out in the latest iterations of every browser, and there’s very little that would/could/should break on legacy. (apart from the rounded corners obviously not showing up).
Once I’m at my workstation I’ll check it for legacy behavior.
Hi,
BTW, I wanted to say thanks for this re-design of the RealNewsPost site that you sent over. We sure appreciate the time that you put into suggesting this new design. With that said, 2 things:
1- We are always looking for top designers to get involved with this effort as Volunteer since RealNewsPost is a Volunteer not-for-profit based effort to get the truth out. Although we can pay some fees, but they would have to be very tight.
2- This design does not have the rounded corners in IE. Darn IE again 
So if you are interested in the 1st point, please PM me.
Regards,
You had CSS3 in the original, so I CSS3’d everything – which is NOT my usual approach to a layout… though it should work in IE9, just nothing earlier.
If I have time later I can toss together an example that does pretty much the same thing without relying on CSS3, that would work all the way back to IE 5.5…
It’s what I do.
Feel free to use my examples, but don’t look to me for full time volunteering on said site – it’s a little too leftist moonbat for my tastes. Lands sake, one of your articles called mainstream media too conservative?!?
But I never let anything like that color my helping someone with their website… Everyone’s entitled to their opinion after all.
Though I would suggest you find a propagandist and a professional writer to help with your copy… The use of tense and target is a bit… akilter – makes it hard to figure out what the text is even trying to say.
Sorry Jason, removed the political bit
Again, we just run the site, anyone can post an article, as long as their article is fact based, we do not chck it for good English grammar.
Cheers,