SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do you put a DIV without causing a new line break

    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,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Simple - just put those two elements in the code next to each other. No need to put them in separate <div>s.

  3. #3
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(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

    Quote Originally Posted by Stevie D View Post
    Simple - just put those two elements in the code next to each other. No need to put them in separate <div>s.

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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%.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by felgall View Post
    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).
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Not when you float them; floated elements "shrink wrap" to be as wide as their contents
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    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
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  8. #8
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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,


    Quote Originally Posted by ScallioXTX View Post
    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).

    Anoox search engine volunteer

    www.anoox.com

  9. #9
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    You can't set a width on inline elements, use float; left instead
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    <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>
    Code:
    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?

    Code:
    <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.

  11. #11
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by Paul O'B View Post
    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:
    Code:
    <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>
    Code:
    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?

    Code:
    <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.

    Anoox search engine volunteer

    www.anoox.com

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Hi,

    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

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Of course the table wrappers should not really be used either but that is another topic.
    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:
    Code:
    <!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>
    		&copy; 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?

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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,

    Quote Originally Posted by deathshadow60 View Post
    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.

    Anoox search engine volunteer

    www.anoox.com

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WorldNews View Post
    2- This design does not have the rounded corners in IE. Darn IE again
    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.

    Quote Originally Posted by WorldNews View Post
    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.
    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.
    Last edited by spikeZ; Apr 28, 2011 at 04:31. Reason: ot removed

  17. #17
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Sorry Jason, removed the political bit
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  18. #18
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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...


    That would be interesting to see. Since I thought that the reason rounded corners were not showing in IE was because you had used the CSS tags for rounded corners that darn IE still does not support.


    It's what I do.

    And thank you.



    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?!?

    Well it is a news site powered by the Social Network, to get the TRUTH out.
    So anyone can write an Article there, as long as said article is based on facts and gets enough UP Votes from the social network.

    But anyway, the bit I mentioned about that we always Volunteer help was to show my appreciation for you having designed a quasi copy of the web site but with the nicer looking borders, etc. So it was just a FYI.


    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.
    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,

    Anoox search engine volunteer

    www.anoox.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •