I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
Related
On this one particular page, I have added a secondary menu (gray bar) under the primary menu (red bar) to have a few links that, when clicked, will scroll down the page to the correct area.
The secondary menu was, by default, much taller than I wanted it - so by adding a height: 40px; value, I was able to get it to the height I want. The page links, however, stubbornly did not adjust along with the height of the menu and thus, when viewed, they are obviously not in the correct place.
Is there a particular CSS value I can add to try and help this issue? I've tried adjust margin-top, padding-top, vertical-align, etc... and some of that adjusts the gray bar, but absolutely nothing has yet to adjust the text for me.
It doesn't help that I'm using a paid theme I bought rather than one I developed myself (in an attempt to make site management easier for someone else who takes over the site, this is more of a "drag-and-drop" template).
http://www.miltonpreserve.com/about/
It looks like you added the 40px height to the div with the #aboutmen id. However, some of the content nested in that div has padding that makes it taller than that. If you remove the padding from #menu-about-menu you should see the text become visible. Then (if needed) you can add 'vertical-align: middle' to the elements that you have nested in #menu-about-menu.
Here's a simplified version of what you have going on:
HTML
<div class="outer">
<div class="inner">
<div class="text">item one</div>
<div class="text">item two</div>
</div>
</div>
CSS
outer {
height: 40px;
background-color: yellow;
}
.inner {
padding: 30px;
}
This simplified example has the same problem you're experiencing. If you remove the padding from .inner, you'll see that the problem goes away. Here's a
jsfiddle with the same code.
Hope that helps!
Im still having a bit trouble understanding my divs. Im trying to make a website that changes its sizes according to browser/screen size.
Ive gotten this far:
my html:
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
my css:
#wrapper{width: 60%;}
#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left; width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}
Now my divs are exactly the right size, the problem is that the conect is always at the bottom of the div but i need it to be like a normal div so i can do anything i want with it.
Whats the easiest way to use it like a normal div?
Thank you for any help! :)
Edit:
Here is what it looks like: http://jsfiddle.net/rswML/
... and as i said the problem is that the text is always at the bottom of the div. I understand its because of padding-top but i need it to keep the hight ratio to width andd still use the div normally.
What you are trying here is a responsive design concept. I advice you to try out bootstrap framework for this. Rather than doing everything by your own, you can get everything done by simply adding a class to your divs.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices
I think the issue may be with your padding values. Perhaps adjusting them will allow you to have the control you want or maybe a margin-top would be better. Also, not sure if you were hoping to line up the tops of the elements #left and #right but those padding settings may render at different values. The padding-top property with a percentage references the containing block's width. Hope that helps. Cheers.
The solution was that i had to make header divs position: relative and then make another div inside of it that was position: absolute and width/height: 100%.
I'm having a very hard time trying to come up with html/css for a layout to suite the following:
Where the left area is a static menu. The right area is dynamic content, generated using a call to ASP.Net's RenderBody method. You may not believe it, but I have been trying to figure this out for hours. I keep getting either the right section ending up underneath the left section taking 100% of the width or not displaying at all, with Chrome's object inspector saying its 0 pixels wide.
I feel like a complete idiot as this seems as if it should be easy as pie. Could I please get some help?
There's several ways to go about this. Here's one not particularly fancy but straight-up way to go about it:
<body>
<div id="menu">MENU</div>
<div id="content"> content <br /> content <br /> content </div>
</body>
CSS:
div { border: 2px solid black; } /* demo purposes */
#menu {
float: left;
width: 150px;
}
#content {
margin-left: 154px; /* menu width + (2 x menu.border-width) */
}
See this jsfiddle for a working sample.
This solution has the added benefit that your content region will take up exactly 100% of the remaining width of its parent:
<div class="parent">
<div class="content">blah...</div>
<div class="left-menu">blah...</div>
</div>
CSS:
.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }
Excellent tutorial on fluid layouts: http://www.alistapart.com/articles/holygrail
Works in IE7 and newer, Safari/Chrome/Opera/Firefox...
The best way to do this is by using the already considered safe to use box-sizing property.
Take a look at the tinkerbin -> http://tinkerbin.com/AcJjYk0r
It works as you want it to. Fixed width for the menu, percentage based width for the content area.
Then...
...if you want the background-colors to expand to the highest of the heights between the two boxes (remember, one times the menu can be higher than the content box, and vice-versa), then the only way to go about it (no javascript) is to use a background image and place it below the two boxes. With css3 gradients (safe to use too) it's pretty easy. Take a look:
http://tinkerbin.com/3ETH28Oq
i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.
I am attempting to center my entire page using only CSS and it is proving more complicated than i first expected. Currently my code works in IE but not in Firefox which makes a change. The page can be seen here. Below is the code portion involved:
#wrap {
width: 960px;
margin: 0 auto;
padding: 6px;
background: #FFFFFF;
}
The structure of my HTML is:
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
It seems that in Firefox everything following the wrap div is be created outside of it. This is problem is resolved if i add a 'float: left' to the wrap div but then obviously everything floats left rather than center.
Any help would be greatly appreciated.
Change your markup to
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
EDIT: Looking at the link, you've already done that. You'll want to either add overflow:auto; to #wrap or add a clearing div at the end just before the closing tag on the wrap div.
Also, on your example page, the wrap div is missing its closing tag.
Use this CSS:
body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}
Then, let's examine this statement from your question:
everything following the wrap div is be created outside of it
That's kind of the way it works. Don't put anything outside of your wrap div. Think of it as a surrogate body.
If you know the width of your page - and it's fixed, you can use the following methodology.
Contain your page content with a div (which will act as a wrapper)
Give this 'wrapper' div a width of 'W'
Position the wrapper div using 'left: 50%;'
now, utilising the fact that it's possible to have a negative margin...
Pull back the positioning of the wrapper div using 'margin-left: -(W/2);'