How can I make the content text on this page, http://morriswebsitedesign.com/about.html, line up with the navigation links? I used to use the absolute property or tables, but now I'm trying to figure out how to use float.
I want it to look like this:
A BBB
where A is nav and B is content.
In CSS when using float, the item you add float to should also have a width.
http://jsbin.com/azetuk/
But when floating you need to know about clearing those floats. Here is a good read:
http://css-tricks.com/the-how-and-why-of-clearing-floats/
If you want logo beside content too, wrap menu and logo in div then float that element
http://jsbin.com/itaqok/
Your text and navigation links are too wide to fit in their containing div. If you want them to line up, you'll have to increase the size of the containing div, or decrease the size of the text and/or navigation links.
When I use the following style, for example, they line up perfectly on my computer:
#content { width:700px; }
You'll have to wrap the miniature logo and the navigation links in a div with the style float:left;. You can then remove the float:left from the miniature logo and the ul.
First remove the float:left from the #content, that will make your #content to be at the right side of the menu.
Second if you don't want part of the text to be under the menu, give it an overflow:hidden.
#menu{float:left}
#content{overflow:hidden}
This way you won't need to give any width to your content.
In order to make some space between them you can give a margin-right and margin-bottom to your menu.
#menu{margin-right:20px; margin-bottom:20px}
I see that in your css your 'p' have margin-top. And that makes the top of your content not to be aligned to your menu. You can use css3 to remove the margin of the first element.
#content p:nth-child(1){margin-top:0}
EDIT:
To align the #content with the logo:
#logo2{width:200px; float:left}
#menu{width:200px; float:left; clear:left; margin-bottom:100px}
#content{display:inline}
First you need your logo and your menu act as a column, to get that both must have the same width, and be floated to the left. The clear left will make your menu to move under the logo.
Then select your #content remove any float:left and give it a display:inline, that way it won't act as a block anymore.
The margin-bottom of the menu is to make that your text won't move under your menu, but you can try giving your menu a bigger height.
Related
I'm making website for the first time and it's very hard for me on some simple tasks. Like right now I'm stuck at this problem. I have one div which floats left and another one which floats right. At some pages div at the left is bigger than div at the right, sometimes it's opposite.
I need one more div which stays at the bottom center no matter which (left or right) div is bigger. Right now I managed to do it work only if div at the left is bigger than div at the right.
Sorry it's confusing and hard to explain, the problem is probably positioning, but I can't figure out myself how to make it work.
In short: Need ID bottom to be at the bottom center, below other divs.
Forgot to mention: If I move divs, it messes up on different screen sizes.
<div id="bottom"><p>How to Make this text to be at the bottom center all the time?</p></div>
Example is here (check ID bottom): http://jsfiddle.net/ZMLyz/61/
#bottom
{
position:absolute;
width:100px;
margin-left:-50px;
bottom:20px;
left:50%;
}
well, the problem is not in css, but rather in the HTML.
You've placed the div id="bottom" within the "div style="float:left;" element. That is why the bottom bar appears to be flying in between. But in reality, it is exactly where you placed it, with the css doing exactly what it's supposed to.
Solution:
In your updated fiddle, please note lines 89 and 90 in HTML.
1. Line 89 is being used to clear float property for upcoming elements.
2. Line 90 is the bototm div.
As for the css, strting from line 15, I've made some changes but it's all the same before that line.
Give it a set width and set the margin to auto. This will center the div in its parent container. You also need to clear both left and right divs since your dealing with floats.
#bottom{
width:800px; /*make the width whatever you want*/
margin:auto;
clear:both;
}
Good Luck
Give style margin-top: Xpx
Here's the example: http://jsfiddle.net/ZMLyz/62/
I have a very basic CSS problem.
I have a floating image in my top-left corner with a margin-right. The content is made of paragraphs and lists with bullets. I want my lists to have a padding-left for more visibility and my bullets appear in "list-style-position: outside" (text must be aligned).
My problem is, when a list is displayed next to my floating image, ul padding is not applying.
Here is an annotated screenshot for your comprehension :
This kind of behavior happens with FF and Chrome. With IE, it is worse because the bullets appear at the very left of the floating image...
Edit : css property "ul{overflow: hidden;}" is not an option because I want to avoid this :
I'm sorry I can't show you a piece of code because it is a Drupal website and the content of the node is generated by wysiwyg module and written by webmaster and editors. I have no access to the generated structure. The content is not fixed and lists could appear everywhere in the text.
This Fiddle represents well my situation: http://jsfiddle.net/34Cuf/
I think you have to get rid of this:
list-style-position: outside
This is putting your bullets points outside of padding. In the box model, anything outside the border box collapses during a float.
Lists have initial left padding on them (so there is enough space to show the bullet) so unless you give the ul a padding that is greater than this initial value, your list will actually move left instead of right.
Have a look at this example
To make your ul behave properly next to a floated element you just need to float it too: Example
Padding won't apply to list at right of floating div, because it stays behind floating div.
It doesn't count from after div, it still counting from left as ul after floating div.
It happens because the div "floats" with text.
To understand it better, play it ul li padding in my example in fiddle
See that a put a little margin in floating div to you see that the content of ul extends form the left margin behind floating div.
You'll have to apply a bigger right margin to the floating div.
HTML
<img id="btnLeft" src="img/btnLeft.png"/>
<img id="logo01" src="img/logo01.png"/>
CSS
#btnLeft{heigth:64px;}
#btnLeft:hover{height:74px;}
On mouseover btnLeft pushes #logo01 down by 10px.
I want #logo01 to stay in place.
Create a separate div for your image elements, float them left or right depending on your preference and then use use vertical-align: top on the containing div. Here is an example: http://jsfiddle.net/94zVg/.
The reason for this issue is because you have to image elements side by side which will be aligned to the bottom of their containing block. When one image is enlargened, it expands the containing block and the other element descends to stick to the bottom of it. Floating and aligning vertically solve this problem.
Give the first image a width as well, otherwise its width will expand proportionally and push the adjacent image down.
#btnLeft{height:64px;width:100px;}
#btnLeft:hover{height:74px;}
Here is a demonstration with explicit width: http://jsfiddle.net/XRKK4/
Here is a demonstration without explicit width: http://jsfiddle.net/XRKK4/1/
I have a navigation bar on top, horizontally. This navigation bar is centered in the middle of the page and has no fixed width.
Below, I have a content box, which gets a max-width approaching the width of the top navigation, it is also centered.
Now, I want another navigation box at the left side of the content (can be with fixed width, but better not), but the content still to be centered (not a box including both navigation and content).
problem with center http://img688.imageshack.us/img688/4306/problemcenter.png
So the code looks like this:
<nav id="main-navigation"></nav>
<nav id="sidenav"></nav>
<section id="content"></section>
Any ideas?
Have a look at this demo.
#sidenav is positioned absolutely with its parent being #content.
If I may, I would like to recommend the following:
Wrap the elements above with a container.
Apply position:relative to this new container.
Next, apply position:absolute to #sidenav.
Finally, go ahead and position #sidenav by applying right:100%
to it.
And there you have it! All you need to do now is style it accordingly.
Here's a fiddle for a working example.
This might be what you're looking for: fiddle!
In a percentage-width container, a H2 is floated left and an image is floated right.
As the browser width is decreased, the image is pushed left towards the H2. When they meet, the logo is pushed down below the H2.
Example JSFiddle:
http://jsfiddle.net/VgS8B/1/
How can I make it so that the text starts wrapping over multiple lines before the image drops down underneath it? Like a sort of CSS "force whitespace wrap"?
This is probably simple but my brain isn't working :(
Is it necessary that the heading be floated left? You could left align it, remove its float, and place it below the image within the HTML to get your desired effect.
try this:
http://jsfiddle.net/VgS8B/5/