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.
Related
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;
}
I have 4 icons that align horizontally. However I would like to have them align with each other through a center line if that makes sense. At the moment they aren't matching up. The top of one image may be in line with the middle of another for example. The icons are of different sizes but I don't mind that, as long as the align centrally. Here is my html
<section class="feature">
<div class="grid_4">
<img src="images/image-1.png">
<p>
Email
iamapdige#<br>hotmail.com
</p>
</div>
<div class="grid_4">
<img src="images/image-2.png">
<p>
Mobile<br>
Call or text 085PIDGEON
</p>
</div>
<div class="grid_4">
<img src="images/image-3.png">
<p>
Facebook<br>
Check us out on Facebook!
</p>
</div>
<div class="grid_4">
<img src="images/image-4.png">
<p>
Twitter<br>
Tweet me! #pidgeon
</p>
</div>
</section>
And the relevant CSS
.feature {
margin-top: 70px;
font-size: 15px;
font-family: sans-serif;
}
.feature img {
float: left;
margin-right: 6px;
}
Thanks for any help. If it's not clear what I mean then I can upload a picture of the PS template to explain.
If the icons are all different widths but you want them all centered on top of each other, try putting the images in spans. Set the width of the spans to be the width of the widest icon, and use text-align:center on them.
Check this JSFIDDLE
Basically, you need to adjust the margins inside, and make the bordering container that i added equal to the sum of the widths and margins of the grid_4s.
so:
.feature{
width:600px;
margin:auto;
}
.grid_4{
width:100px;
margin:25px;
}
What the margin auto does is that is adjusts its margins automatically within section's width of 100%. the margins auto-position itself in the center based on the width of the container feature. therefore if you want your images central and aligned horizontally, then they need to perfectly equal the width of the feature div, so add up the width and margins (horizontally) and come with the answer as the width of feature, if you follow...
hope this helps!
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.
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.
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):