Placing divs side by side causes linebreak, instead of overflow - html

I have a small problem with two div's placed side by side.
The left div is always of fixed width, but the right one is not, and if the content is too big it causes a linebreak, which is really annoying.
This is the example code:
Everything's alright here:
<div id="no1">
<div class="left">This one is on the left side</div>
<div class="right">This one is on the right side</div>
</div>
CSS:
.left {float: left;}
.right {float: right;}
But if the content of <div class="right"> gets too long, it causes an unpretty linebreak.
I tried setting <div id="no1"> to overflow: auto and overflow: scroll but that didn't do anything.
Then I tried setting the width of no1 big enough, so everything should fit, but that didn't work either.
I am a bit confused on what to do next.
A JsFiddle for demonstration can be found here http://jsfiddle.net/3b4s7ta7/.
Thanks in advance for your help guys!
Solution:
Alright, the solution is easy. As user2482616 and others suggested I only had to set the size of the two div's to 50%, like this:
.left, .right {width: 50%;}
Thank you guys!

Try this css:
.left,.right{width: 50%;}
as create separate css query it will make your file large. So try to minimize it by placing common css at once. check your code on Edited Code i have edited.

Try adding width: 50%; to the divs, like so:
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
JSFiddle
(Or any width you want of course)

To add scroll, you need to do something like this:
<strong>This is how it should be:</strong>
<br>
<br>
<div id="no1">
<div class="left">This content is always left</div>
<div class="right">This content is always right sided</div>
</div>
<br>
<br><strong>This is baaaad:</strong>
<br>
<br>
<div id="no2">
<div class="left">Still on the left side</div>
<div style="height: 50px; overflow-y: scroll;" class="right">But the long content in this div causes a linebreak, an automatic overflow would be nice, scrolling on y-axis is not very pretty, but linebreak isn't either.</div>
</div>
FIDDLE

Give width to both left and right div. Also, give height to the div with id "no1" to allow scrolling on overflow. And try using a clear:both; instead of giving so many br.
You can see the problem in this fiddle.
Here's the working code and its Fiddle
HTML:
<strong>This is how it should be:</strong><br><br>
<div id="no1">
<div class="left">This content is always left</div>
<div class="right">This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided</div>
</div>
<div class="clearer"></div> /*replaced br*/
<strong>This is baaaad:</strong><br><br>
<div id="no2">
<div class="left">Still on the left side</div>
<div class="right">But the long content in this div causes a linebreak, an automatic overflow would be nice, scrolling on y-axis is not very pretty, but linebreak isn't either.</div>
</div>
CSS:
.left
{
float: left;
width:50%;
}
.right
{
float: right;
width:50%;
}
.clearer{
clear:both;
}
#no1{
overflow-y:scroll;
height:150px;
}

Related

Change-up in floating divs behaviour when they overlap

I have two divs. They can both contain variable sized content.
One needs to float left, the other needs to float right. Or rather, one needs to hug the left side of the parent and the other the right (in-case someone has a non-floating solution). But when they overlap (i.e when the browser is shrunk to a size that makes the floated left div come into contact with the floated right) I want them to clear, or stack one-on-top-of-the-other as if they were both floating left without enough space to fission.
Is this even possible?
Some HTML:
<div id="header">
<div id="header-title">
<h1>
Title (variable length)
</h1>
</div>
<div id="header-menu">
<h2>
Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7 (variable length)
</h2>
</div>
</div>
Some CSS:
#header{
overflow:auto;
}
#header-title{
float:left;
}
#header-menu{
float:right;
}
It's worth mentioning that the desired behaviour is somewhat in the realms of responsive web-design, but I want it to behave this way without the #media query. The viewport meta tag will be used eventually, but for the moment I just want it responding correctly in a desktop setting.
Good luck...
Is this what you meant?
http://jsfiddle.net/K8fnc/3/
#header{
overflow:auto;
}
#header-title{
float: left;
}
If you take away float: right on the second div, it will work.

How to put something directly to the right of another thing (HTML/CSS)?

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.

How Do I make a div tag occupy the half of the right hand side of my Web page?

It is a basic HTML question.
I have some div tags, which have some controls and occupy left half of my screem.
I Want to have a div tag to display some messages in the right side?
I used somthings like:
float = right;
in my css class. It didn't seem to work. What other properties I need to set.
Here is the code sample
<div class ="header_label">
#Html.GetLocalizedString("program_snapshotRecipientAdress") #Html.TextBox("txtRcpntAdress")
</div>
<div class ="header_label">
#Html.GetLocalizedString("program_snapshotUsertype1") #Html.RadioButton("Usertype", "One", new { id="rb1"})
#Html.GetLocalizedString("program_snapshotUsertype2") #Html.RadioButton("Usertype", "Two", new { id = "rb2" })
<div class ="commentsHeight"></div>
</div>
<div class ="header_label">
#Html.GetLocalizedString("program_snapshotDate") #Html.TextBox("SnapshotDate")
</div>
<div id ="CMSContent">
<div class ="CMS-message">
#Html.Raw("S=This is the div I need to place in the right hand side")
</div>
</div>
I didn't understand your question so much, but I'll try to answer.
If you have some div on the left and you want another one on the right you have two choice:
1) The first one is to set one div on the right and another on the left:
<div>
<div style="float: left; width: 50%">I'm on the left</div>
<div style="float: right; width: 50%">I'm on the right</div>
</div>
2) The second one is to set every div on the left
<div>
<div style="float: left; width: 50%">I'm on the left</div>
<div style="float: left; width: 50%">I'm on the second on the left</div>
</div>
Are you sure that you named the div correctly?
the correct way to your command is
float : right;
If you want your div to be half of your screen you should write something like:
width : 50%;
You can make a div occupy the right hand side of the screen in a multitude of ways, one of which is 'floating' as you've found.
This takes the element out of the normal 'flow' of the document and allows it to occupy a different area of the screen depending on parent elements etc.
At a glance you would need to write:
float: right;
In your CSS, rather than = but if you could post some html and css in a more full form, some better advice can be provided.
if you want to show your form or something in two halfs or grids use this:
float: right;
width: 50%;

Adding side by side divs confusion

I always seems to get this simple HTML stuff wrong. I am currently trying to add side by side divs in the middle of a page on this test page I made:
http://www.comehike.com/hiking_dev.php
The code I added was something like this:
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
I added <strong> tags so you can spot it on the page better.
But do you see there is text that appears there that reads like this "When considering the injury risk of any" - but that text is in the <p> tag below. Why is it appearing there?
Is it better practice to wrap my 2 divs that I am trying to align, within another div?
After your two floating divs, add another empty div...
<div style="clear:both;"></div>
This will cause the two floating divs to push all subsequent content below them. As you have it now, there is 200 pixels of empty space after the first div allowing the other content to simply wrap around it.
Increasing the width of the floating divs may not be desirable for your layout so clear:both; is most typical for this situation.
Surround those two divs in a parent div with overflow set to hidden.
<div style="overflow:hidden;">
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
</div>
An alternative (as others have pointed out) is to use a third element:
<div style="clear:both;"></div>
It's debatable as to which is better. Usually, either is just fine. Here's a post about the topic:
Floated Child Elements: overflow:hidden or clear:both?
You'll either need to add a div below your two divs with clear:both; as others have suggested, or you could add clear:both; to the following <p> element.
Because you have an entire page width of 960px. You're combined div widths are 760px (400+300). If you add 200px to the second div you should be fine.
Edit: Because of padding, you can increase either of the divs by 150px and be fine.

Css - Don't want elements below my floated element

I have a floated div with "sidebar" text. Its parent container has text as well.
I don't want to have text below my floated "sidebar" div:
example http://img864.imageshack.us/img864/6058/screenshot2011052613084xv.png
How can I fix this?
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
If it doesn’t mess up anything else, you can use overflow: hidden or overflow: auto to fix this:
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<div class="next-to-float" style="overflow: hidden;">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
See http://jsfiddle.net/pauldwaite/YL5P3/
I’ve written about this more fully here, including code to make it work in IE 6: xHTML/CSS: How to make inner div get 100% width minus another div width
I still don’t really understand the reasoning behind why overflow: hidden does this, but I understand that it does follow from the CSS spec.
Set right margin on non-floated element
JSFiddle
The only requirement is that you must predefine your floated element's width. Then it can have whatever height you like and the non-floated content (when applied right margin) won't stretch under floated element.
How it works?
We have floated element on the right with width = X
We have usual content but set its right margin = X+s where s is some predefined space between your content and floated element so they don't touch.
And that's it.
Since you have multiple content elements (heads, paragraphs) you have to put them inside a container with this right margin setting.
<div id="parent">
<div id="floated">Foo bar</div>
<div id="content">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
And CSS:
#floated
{
float: right;
padding: 1em;
background: #ccc;
width: 10em;
}
#content
{
margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}
Why is this solution better than setting main content width?
Because setting main content width will only work when you want to limit your document content to a fixed width (like 960 grid). But when you want your content to stretch over the whole browser window width, this solution will work regardless of browser window size.
And a small advice
Avoid using inline styles whenever possible because maintainability of your application/site will become a nightmare.
You can nest 2 div tags inside the container. Float them both and resize them as you need them to be.
Set a bottom margin on the floated element that equals the length of the remainder. Or add a width to the larger element and float it the other direction.
<div id="parent">
<div id="floated" style="width:200px; float:right">Foo bar</div>
<div id="content" style="width:600px; float:left">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
OR
<div id="parent">
<div id="floated" style="width:200px; margin-bottom:200px; float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
its easy simply add width in [P] tag see here
example
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p style=" width: 500px; ">Text!</p>
</div>
for example your ( id="parent" ) have 800px width
and (id="floated") right-side bar have 200px width
then make your [P] 800px - 200px = 600px
so set your [P] width to 600px
---------- or
if you want some space between text and bar make [P] width 580px
it means 20px for space