I have a website that uses a sidebar on the right. That sidebar is using "float:right" as its CSS style.
I like to add content to the main that has text floating around images, as explanations. For those images, I use "float:right" as well, and it works as expected.
The challenge starts when I add several sections of text with images under each other, like this:
1st text +-----+
text text | img |
+-----+
2nd text +-----+
text text | img |
+-----+
By default, the 2nd paragraph would start right after the 1st one's end, like this:
1st text +-----+
text text | img |
2nd text +-----+
text text
+-----+
| img |
+-----+
I learned that I should use the style clear:right between the paragraphs to keep them separated, and that works as described.
Here's the code I'd use for each of the img+text blocks:
<div>
<img style="float:right" src="animg.png" width="502" height="241" alt="bla bla">
<p>Text for the image.</p>
<div style="clear:right"></div>
</div>
However, now the sidebar starts making trouble: If the sidebar is going down further than where the clear:right appears on the left side, then there will be a gap in the content, going as far as the sidebar goes. You can see the effect here: website example with sidebar influencing clear:right
Any suggestions how to deal with that, i.e. avoid that the clear:right doesn't get affected by the sidebar's height but only by the local text+image block?
One suggestion I found so far would be to avoid using float for the sidebar, but use a table instead. But that leads to new complications (e.g. the sidebar would end up on the left unless I change the order of my html content, which would then probably lead to new issues with smaller screens and whatnot).
Your content area and your sidebar need to be in separate div tags:
<body>
<div>Header</div>
<div>Content</div>
<div>Sidebar</div>
</body>
Float the content left, and the sidebar right. You can then add as many elements inside each of those sections as you need. As long as the HTML is well-formed (i.e. not missing closing tags when needed) and they all stay within the width of their parent, they won't have a problem.
EDIT:
With a static sidebar and a fluid (elastic) main area, it gets a little more complex. First of all, remove the right-hand margin from #main, and add:
overflow-y: hidden;
Then, change the margin-right on your boxes div to:
margin: 0 2em;
That should sort the problem for you.
Enjoy the code.
HTML:
<div class="main">
<div class="box-one">Your content here</div>
<div class="box-two">Put photo here</div>
<div class="clear"></div>
CSS:
.clear{
clear:both;
}
.main{
width:100%;
background:#424242;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
}
.box-one{
width:260px;
background:#FFF;
float:left;
}
.box-two{
width:100px;
background:#FFF;
float:right;
}
Related
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.
I basically need to create a title that has a vertically centered horizontal line filling up the width (left and right) but that also supports multiple text elements on the same line, e.g. to form something like:
----- Alpha - Beta - Gamma -----
This is what I have so far:
JSfiddle
Here, I have the demo working fine BUT it requires a background to work, this isn't a good solution since my background on my site is not a static single color (it's a fixed picture which doesn't move when you scroll).
JSfiddle
So what I need to do is basically fix the first version to work like the second version but without using a background.
I thought of doing something like:
<div class="content">
<div class="line"></div>
<div class="line-text">Some</div>
<div class="line-gap"></div>
<div class="line-text">Text</div>
<div class="line-gap"></div>
<div class="line-text">In a Line</div>
<div class="line"></div>
</div>
Where .line would be an auto width (to fill the left and right sides) and .line-gap would just be say 10px to show the line between the text.
EDIT/UPDATE
Here is another demo, but I would prefer something that is more automatic rather than trying to set the position absolutely because it is for a responsive fluid design...
JSfiddle
If you don't want to use a background, you could do a little trick using the :before and :after properties.
Here's the example jsFiddle, you can change the content/properties to whatever you like and it does what you've asked.
Example below.
HTML:
<ul>
<li class="sub-menu-item" >Example</li>
<li class="sub-menu-item" >Example</li>
</ul>
CSS:
li.sub-menu-item:before, li.sub-menu-item:after {
content: "\2014 \2014"
}
li {
display:inline-block;
}
I have some basic markup along these lines:
<div class="page_content">
<p>A paragraph of text.</p>
<p>Another paragraph of text.</p>
<img src="image.jpg" />
<p>Some more text.</p>
</div>
The paragraphs are constrained in size, i.e. .page_content p{min-width:24em;max-width:36em}. I'm aiming for a responsive layout.
At large browser widths I would like to move the images out of the main flow of text to achieve a layout along these lines (n.b. image in html above may not match position shown below!):
===== = Image
--------
--------
--------
-------- ======
-------- ======
-------- ======
--------
--------
--------
--------
If I float:right the images, they scoot out of the text, with their top edge in line with their 'parent' paragraph. However, they are aligned all the way over to the right hand side of the page. I don't seem to be able to find a way to keep them flush to the right hand side of the paragraph that they sit with.
I don't want to move the images out of the main page_content div, because at small screen widths I'm looking to have the images appear in the same 'column' as the text - responsive design.
Any ideas on how this could be achieved? Is it possible? I've spent a few hours playing around but am none the wiser!
I would do something along the line of this:
http://jsfiddle.net/RjDaS/16/
I would wrap every paragraf tag in a div (this one has a class called section) and let the image be next to it. This will also work for your responsive design. However I was unable to let your image stay in the page_content div.
<div class="page_content">
<p>A paragraph of text.</p>
<div class="Section">
<p>Another paragraph of text.</p>
<img src="image.jpg" />
</div >
<p>Some more text.</p>
</div>
css:
.Section p{
float:left;
/*min-width:24em;*/
max-width:36em;
margin-right:10px;
}
.Section img{
float:left;
}
.Section{
overflow:hidden;
}
Edit: Added float left so it will stay close to the p tag. (Removed min-width for better visualization)
I have a page layout with two div. They are both float:left and so appear as columns next to each other. I want them to stay that way. However, if the text in the right-most div is too long then the whole text moves down below the left most column. This also happens if the text is short, but I make the browser window smaller. What I want is for the long text to take up more lines, but only within its own right column.
CSS:
.left{float:left}
.right{float:left}
HTML:
<div id="container">
<div class = "left">
<span>some text</span>
</div>
<div class = "right">
<span>some long text....</span>
</div>
</div>
Edit: Also, the left column should stay fixed.
Sounds like you want to do something like this:
http://jsfiddle.net/VV4Hc/8/
The outer container specifies the width those two divs should occupy. As you can see, they also have percentage widths so you can change the container's property without having to go back and change the divs.
Word of warning, remember to clear your floats as well, so other elements don't get "caught" in the float. To do that, just define an element with the property clear:both like this:
.container {
width: 1000px;
margin: 0px auto; /* This will center the container on the page. */
}
.left, .right {
float: left;
width: 50%;
}
.clearfix {clear:both;}
<div class="container">
<div class="left">...</div>
<div class="right">...</div>
<div class="clearfix"></div>
<p>I won't get caught.</p>
</div>
If you're looking to do this for layout, you may want to consider a CSS framework, which has these sorts of things perfectly measured based on a specified number of columns. See:
Bootstrap/Kickstrap
960.gs
Blueprint
You can set the positions for those divs like
.left{width: 50%; position:relative; top:0%; left:0%;}
.right{width: 50%; position:relative; top:0%; left:50%;}
I was able to solve it with a table. When the window is made smaller, at first only the right column is made smaller and the words squeeze down on more lines until the column has disappeared. If the browser is made smaller than the width of the left column, then the left column starts disappearing, cutting off words. Works in my Chrome and IE although I don't know about older IE.
.td_right{vertical-align:top; max-width:300px;}
.td_left{vertical-align:top; min-width:300px; width:300}
<table >
<tr>
<td class = "td_left">
stuff here
</td>
<td class = "td_right">
stuff here
</td>
</tr>
</table>
Issue
As far as I know clearing floats mostly works on parent items. But there is one issue in my template after the post thumbnail, where the clear: both acts on the whole content wrapper. Without clearing the float, the thin line will stick to the text right to the thumbnail.
What I want to do is to have the line 45px below either the thumbnail or the text (depending on what height is higher).
Preview
Please have a look at this sample.
Any help would be highly appreciated!
Just use the overflow: hidden; hack to end floats.
Add the CSS overflow: hidden to the parent element.
EDIT
As a bonus. If you want to use some fancy CSS3 stuff (like dropshadows) the above hack will fail.
There is a new hack: http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
Although this hack also has some issues.
And it would take some time before you can make some serious use of fancy CSS3 stuff.
You could use it, but the browser support will be poor for a long time :)
I would recommend using a .clear class that could be used anywhere to clear floats, it would look like this:
.clear { height:0; overflow:hidden; clear:both; }
Insert it under your floated elements to clear them, it
Float the thumbnail div left and the text div left as well. after them, set a div
<div style="clear:both"><!-- --></div>
The div that contains all 3 of these will take the length of the heighest div.
Basically:
<div class="container">
<div class="thumbnail" style="float:left; width: 50%;"><img src="whatever.png" /></div>
<div class="text" style="float:left; width: 50%">My text</div>
<div style="clear:both;"><!-- --></div>
</div>