I've been working on website recently and have come across a major problem :http://jimbob.webatu.com/index.html(you'll need to see the coding on the webpage).I've set my website up so that there are two main columns but are centered into the middle.The id wrap is what centers everything together and the two columns float left or right:
#wrap {
width:750px;
margin:0 auto;
background-color:#6E6E6E;
border-left:3px solid #A9E2F3;
border-right:3px solid #A9E2F3;
}
#main {
float:left;
width:496px;
background:white;
border-top-right-radius:5px 5px;
border-bottom-right-radius:5px 5px;
}
#sidebar {
float:right;
width:250px;
} `
Recently though i tried to add a footer bar like with the navigation bar at the top. this has been set to stay in the warp overall by using "clear:both" and have been trying to make it avoid the "wrap" id altogether.However something has gone wrong and the div's that control the "wrap"and "secondborder" won't fully close. Also as you may see a gray bar has appeared behind and the "wrap"background won't apply(I've set the sidebar background to nothing so that the "wrap" background applies to it. This makes it look a bit neater).I cannot paste the required coding as there is too scattered and is too long(look at the page source on the webpage).
Can anyone provide a solution to the "wrap" background and the "footer" not centering? I have only been learning html and coding for the past 3 months so please forgive me if this is a stupid mistake I've made. The link again to my website where the problem is : http://jimbob.webatu.com/index.html
Add the overflow: hidden; to your #wrap as such
#wrap {
width: 750px;
margin: 0 auto;
background-color: #6E6E6E;
border-left: 3px solid #A9E2F3;
border-right: 3px solid #A9E2F3;
height: auto;
overflow: hidden;
}
In order for your #footer to act like a footer at the bottom of your page you will have to take it out of your #sidebar and place it after the closing for #sidebar. This should fix your problems.
To fix the #sidebar being cut off you need to float it left as opposed to right as suc,
#sidebar {
float: left;
width: 250px;
}
Hopefully this helps.
Generally speaking you need to clear after your floating div's. This tells the browser to stop the floating for the next element. Looking at your HTML I'd add before the <div id="footer"> <br style="clear:both" />
Also, before you close #wrap add another <br style="clear:both" />
I just added a new div to your secondborder element: <div style="clear:both"></div> that sorted the problem. You were floating and not clearing the sidebar or the main div.
Related
I've looked at and tried a few of the existing solutions on the site (for example CSS Problem to make 2 divs float side by side and CSS layout - Aligning two divs side by side) but none of them work for me.
I'm a bit of a newb to CSS but I'm trying to align the title and menu on my WordPress site http://photography.stuartbrown.name/ in a similar way to http://www.kantryla.net/. Whenever I float:right on the menu area however the menu disappears below the image and a float:left on the menu it pushes the image way out to the right.
I know that in order to achieve what I want I will need to reduce the size of the site title and reduce the width of the menu (perhaps by reducing the gaps between the items in the list?), but I'd really appreciate some advice on how to achieve the title and menu layout of kantryla.
You may notice that I edited the PHP of the theme to include a DIV
<div class="stuart_menu">
that surrounds both the title and menu thinking that this wold make the enclosed items easier to control. Nt sure if that's right or not but I can easily remove if necessary.
Thanks for any help!
Place these styles in your CSS
#logo {
float: left;
margin: 0 0 25px;
position: relative;
width: 20%;
}
#logo h1 {
color: #555555;
display: inline-block;
font-family: "Terminal Dosis",Arial,Helvetica,Geneva,sans-serif;
font-size: 25px;
font-weight: 200;
margin-bottom: 0.2em;
}
#menu {
float: left;
width: 80%;
}
.stuart_menu {
overflow:auto;
}
I guess thats it.
The menu is kinda messed up, I can't make any sense out of it with all the (unneeded) elements, classes.
But basicly you're on the right way, you'll need to redruce the size of both main elements (logo and menu) so it fits inside the parent div.
For instance, like this:
HTML
<div class="stuart_menu">
<div class="logo">logo</div>
<ul class="nav">
<li>Home</li>
<li>Blog</li>
<li>Photos</li>
<li>Delicious</li>
<li>Twitter</li>
<li>Google+</li>
<li>FOAF Description</li>
</ul>
</div>
CSS:
.stuart_menu {
width: 600px;
}
.logo {
width: 150px;
background: red;
float: left;
}
.nav {
list-style: none;
margin: 0;
padding: 10px 0;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
float: left;
}
.nav li {
display: inline-block;
}
Also check this demo.
You can choose if you want to align the menu next to the logo (using float: left) or align it to the right side of the parent (changing the float to right).
Any kind of solution you can try could lead to modify the look & feel of your site.
Maybe you can try to achieve this by reducing the width of the elements and make it float on left.
BTW, this would mess up the entire design of the site, because the "menu" section is inserted into the main container element. So I'd rather separate the two section.
what I'd do is:
#logo{ width:60%;float:left;}
nav {width:35%;float:left;}
to reduce the gap between the nav li elements you can reduce the padding and to make it more recognizable, add a border-right
#menu ul li{margin:22px 15px; border-right:1px solid #ccc;}
Hope this works
Just changing the #logo to include float: left; should put the menu up with the logo. It will be to the right of it. Its just a matter of then down sizing both the logo and menu to fit within the container. Also the other answer should also work.
I've run into a bit of a snag whilst developing the frontend for a website. I'm competent with CSS, but not fantastic. Anyway, I've created a jsFiddle here that illustrates my problem.
On each page of my website, at the top of the content section, I have a banner image. I wish to put a two colour divider seperating this banner from the content. (As is shown in the mockup my designer gave me: https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)
I'd like to do this in pure CSS+HTML, without just chucking an image in. Anyway, I've done so using the following code:
<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;">
<div>
<div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div>
</div>
(Please forgive the inline CSS, it's just for demonstration purposes. Also, unfortunately, if I put the second div on a newline and indent it, it creates whitespace)
The issue I'm having is that there is a large gap between the divider and the image. I have tried adding margin: 0px and padding: 0px to all the relevant elements, and the whitespace is still there.
Could someone help me out please?
Thanks,
YM
To me it's a vertical alignment issue. You can try
.banner {
display: block;
width: 100%;
}
div {
height: 10px;
vertical-align: top;
}
That way you don't have to use negative margins (which aren't wrong, just controversial practice).
Check it out here
you can make the position relative and then set the top to something minus. ex:
position: relative;
top:-10px;
left:0px;
this is actually float problem
<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg">
<div style="">
<div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div>
</div>
css
.banner {
width:100%;
float:left;
}
http://jsfiddle.net/eLbUU/4/
using display block and floating the divs, also making sure the img itself is display block with overflow hidden I was able to tighten up the stripes to the img : fiddle
.banner {
width:100%;
display: block;
overflow: hidden;
}
div div{
float: left;
}
First of all, put the darker brown in the lighter brown div. That way, when the window is re-sized, you don't compromise the sizing percentage and/or spacing.
<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>
And with the space, you can either use negative margins or floats like others have mentioned.
.banner {
width:100%;
/* margin-bottom to the banner is negative which moves the div upward */
margin-bottom: -10px;
}
fiddle here
Putting display: block; for the image class and float:left; for all other elements may help.
.banner {
width:100%;
display:block;
float:left;
}
http://jsfiddle.net/bjliu/eLbUU/7/ (Edit: Sorry Wrong Link)
It's kinda hard for me to explain the problem, so let me give you the URL.
Visit http://www.ucaftercruz.com
If you look at the footer, theres an unordered list aligned vertically. When you drag the browser and make it smaller, the list goes from one line to two lines. How do I make it so that it stays in one line and in the center of the footer regardless of window size?
I suspect it has something to do with my divs.
Here is my html code:
<div style="clear:both;">
<div id="footer">
<div id="footer-pages">
<ul>
<li>About the blog</li><span></span>
<li>The Authors</li><span></span>
<li>Archives</li><span></span>
<li>Credits</li><span></span>
<li>FAQ</li>
</ul>
</div>
And here is my CSS:
#footer {
height: 100px;
background-color: #d0cabc;
font-size: 12px;
}
#footer a {
color: #606060;
}
#footer-pages {
padding: 20px 0;
border: 0px solid green;
margin: 0 auto;
width: 35%;
}
#footer li {
display: inline-block;
margin: 0 15px;
}
In order to make it so that the menu can be dynamically added to, you should make the container width (#footer-pages) to be a fairly wide div, and center the contents. I used the following code via the inspector:
#footer-pages {
width: 100%;
text-align: center;
min-width: 500px;
}
add #footer { white-space: nowrap } to your css for footer. You could also add min-width:###px where ### is big enough.
In the first case, you tell the rendering engine to avoid making the box any smaller than the minimum required to contain the text. I actually don't know for sure if this will work on this kind of list.
In the second case, which I know works, but is a little less elegant, will force the engine to keep the layout box no smaller than a specific amount -- if you choose an amount that will contain the text, it may add scrollbars (which you can control with the overflow property) but not cause the text to wrap.
I have two divs on a webpage and I would like both of them to have a fixed width and would like the first div to be floated to the left of the second div.
This sounds so simple that I though the following Markup and CSS would give me the desired result:
<div class="left">Content</div>
<div class="right">Content</div>
div.left {
float: left;
width: 200px;
}
div.right {
width: 200px;
This doesn't work as expected, instead the right div appears on the next line as though it wasn't floated. This is best explained in this example webpage:
Example of the Problem
My question is WHY this doesn't work as expected? Not how to fix it.
Notes:
Please make sure you fully understand how floats work before answering this question.
Please make sure you view and understand the examples.
Both elements must be block, not inline.
I understand all fixes/hacks to make this work. I want to know why it doesn't work.
This appears to only work correctly in Opera.
Backing up your answer with documentation is required.
It seems to me that it is the simple rule that blocks, unless floated, always start a new line. w3.org/TR/CSS2/visuren.html#block-formatting section 9.4.1 –
div.left {
float: left;
width: 200px;
height:200px;
background:red;
}
div.right {
float:right;
width: 200px;
height:200px;
background:blue;
}
see http://jsfiddle.net/3kUpF/
Alternatively, if you want them side by side then you can float:left on both
see http://jsfiddle.net/3kUpF/1/
Floating elements can flow "into" block elements, occupying the same line but pushing the contents (not the element itself) over. In this case, left is "inside" right, but there isn't any space left for the text on the right, so it goes underneath. To see what I mean, try setting the width of right to 300px instead of 200px - you should see the blue border "around" left, with the text flowing around it. To "fix" this, I'd suggest giving right a float of left or a display of block-inline.
Float both divs left.
Apply a positive left margin of width(div.right), in your case 200px.
Apply a negative left margin of width(div.left) + width(div.right), in your case, 200px + 200px = 400px.
div.left { float: left; width: 200px; margin-left: 200px; }
div.right { float: left; width: 200px; margin-left: -400px; }
The second element should be inline element.
div.right {
width: 200px;
display: inline;
}
If you do not want to make second element inline, just float it to the left too. But your container will collapse. You can fix it using clear:
<div id="container">
<div class="left">Content</div>
<div class="right">Content</div>
<br style="clear:both"/>
</div>
div.left {
float: left;
width: 200px;
border: 1px solid red;
}
div.right {
width: 200px;
border: 1px solid green;
float:left;
}
#container{
border: 1px solid black;
}
See example
You could add clear:both; your <p> tags. That would solve the problem. Without breaking the rest of the (example) page.
in case you want both containers to float besides each other, you can rather use a span instead of a div. That might bring the problem to an end.
I have a containing div that is NOT restricting the width of its child divs. The divs are stretching all the way to the full width of the screen, when i have a set width on both the container and the child. Why is this happening. I do NOT have any positioning or floating going on.
Please view my HTML:
<ul class="tabs_commentArea">
<li class="">Starstream</li>
<li class="">Comments</li>
</ul>
<div id="paneWrap">
<div class="panes_comments">
<div class="comments">member pane 1</div>
<div class="comments">member pane 2</div>
<div class="comments">member pane 3</div>
</div>
My CSS, the relevant parts of it at least:
#MembersColumnContainer {
width: 590px;
float: left;
padding-right: 0px;
clear: none;
padding-bottom: 20px;
padding-left: 2px;
}
ul.tabs_commentArea {
list-style:none;
margin-top: 2px !important;
padding:0;
border-bottom:0px solid #666;
height:30px;
}
ul.tabs_commentArea li {
text-indent:0;
margin: !important;
list-style-image:none !important;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
float: right;
}
#paneWrap {
border: solid 3px #000000;
}
.panes_comments div {
display: ;
padding: px px;
/*border:medium solid #000000;*/
height:150px;
width: 588px;
background-color: #FFFF99;
}
You could set max-width on either, or both, of the div elements to prevent their expansion:
#containerDiv {
min-width: 400px; /* prevents the div being squashed by an 'extreme' page-resize */
width: 50%; /* defines the normal width of the div */
max-width: 700px; /* prevents the div expanding beyond 700px */
}
It might also be that you're allowing the div's overflowed contents to be visible, as opposed to hidden (or auto). But without specific examples of your mark-up and css it's very difficult to guess.
Generally giving elements layout is pretty straight forward (always assuming you have a good understanding of floating, positioning and the box model), and in most cases you wouldn't have to use max- min-width to control elements on the page.
My two cents: If I was you, I'd start stripping out code (starting with the !important rule), and see when the problem is solved. De-constructing the code like that is a good way to find bugs.
Sorry I couldn't help, but I'm reluctant to give advice since the code you provided shows a lot of other stuff going on elsewhere that might be contributing to your problem (like having to use !important).
:D
I figured out the problem. The file that was calling in the css was conflicting with another external css file that had the same element with the same name in it. Thank you all for your help though.