|
CSS - Can't Fix The Css To Match
Hi,
I have one site, running two scrpts, and I just can't get one CSS to match the other. I'm nearly there, but I just need to make the body copy (main page text) the same in each. I am trying to make this (While oxygen is vital to every human...) the same as this (Christopher Manton is a nutritionally-oriented natural ...) Please help. What should I change to make them match? Thanks Similar TutorialsI have read a few posts but could not find one that was similar. I have a center column where I will be putting text. Here is structure for the center column. #center { margin-left: 160px; margin-right: 205px; margin-top:0px; padding:0px 0px 0px 0px; background-color:transparent; } When I put text inside it, and use the <p> tags, p { margin: 0px 12px 0px 2px; font-size:small; font-family:Veranda; font-color:#000000; padding-bottom:10px; pading-top:20px; } in netscape and firefox the margin is perfect on the left. In IE, however, the margin of the first paragraph is about 2pixels from the left. I know there is something in the box model I am not taking into consideration. any info would be great thanks Thanks for taking the time to read my question. I have a container that has a bunch of stuff in it. In IE the container grows (I know it shouldn't) with the content. FF the content doesn't. I want to use the same container on each page in my site, but each page will have different amounts of content making the page longer or shorter. I need the container to match the contents, and I would like to do it without making duplicates of the container in the CSS and changing only the height. For an example check out warrenpersowich.com Look at the home page and the Seminars page. See how the content is differen, but the container is the same. Thanks, Brad I am baffled by what seems like a simple task which I can't seem to find the solution to. I've two columns (#top_left, #top_right) inside a containing div (#top_container). I want both columns to be the same height (100%). So if the column on the right has more content, the column on the left will stretch to match the same height. If I set a fixed height on the containing div (#top_container), it fixes the issue, since at this point my declaration of height:100% on the two columns actually knows what it is supposed to be 100% of. But then I run into overflow issues if the content goes over fixed height and when I try min-height, the columns fail to stretch once more. Here is my code: Code:
<style type="text/css">
#top_container {width:760px;}
#top_left {float:left; height:100%; width:200px;}
#top_right {float:left; height:100%; width:560px;}
</style>
<div id="top_container">
<div id="top_left">Content</div>
<div id="top_right">Content</div>
<br clear="all" />
</div>
I've slimmed down the code and cut out non relevant pieces like font styling, colors, and other non pertinent sections. Hey, I have two columns on a site I'm working on, which are a liquid height, this works fine, the page scales the overall page height to contain all off the content. The thing is, I want column 1 to dictate the height of the page, and for column 2 to match that height and add scroll bars if needed. So far I have: Code:
#wrapper {
width:975px;
background-image: url("../Images/main_background.jpg");
}
#left_column {
width:625px;
float:left;
padding:0px 25px 0px 25px;
}
#right_column {
width:250px;
float:right;
padding:0px 25px 0px 25px;
}
I experimented with adding overflow:auto;, overflow:scroll; and height:inherit; to the right column, but it still stretches to contain the content in the right_column. Any ideas? Thanks guys. Hi guys! Just wondering if this is an easy fix, otherwise I'll just switch the layout to a table. HTML: Code: <div id="box"> <div id="left"> <h1>MENU left</h1> <p>Content on the left.</p> </div> <div id="content"> <p> content... </p> </div> <div id="right"> <p>content...</p> </div> </div> CSS: Code:
#box {
width:750px;
margin: 0px auto;
padding:0px;
border:1px;
}
#content {
width:400px;
padding:0px;
float:left;
overflow: auto;
}
#left {
width:173px;
padding:0px;
float:left;
background-color: #223344;
border-color:white;
}
#right {
width:173px;
padding:0px;
float:left;
background-color: #223344;
border-color:white;
}
I want all three columns to expand vertically to the size of the largest column. As of right now it's set up using CSS and I would prefer to keep it that way, but if switching the layout to tables would be much easier, I would be happy to do that too. Thanks for the help in advance! Hi - I'm a bit of a noob when it comes to CSS etc. but have been asked to modify some code for someone. Basically it's a simple site that has the main content centered on the screen (about 960px wide). However there is a large banner image that is about 2000px wide that is supposed to stretch as wide as say a large 27" mac. I am not sure if this is the correct way to do it but I guess they couldn't use a smaller image and repeat it because there is a unique design/pattern throughout the whole width. Anyway, on smaller browsers everything looks good except the horizontal scroll bar allows the user to scroll all the way to to the right. Is there anyway to clip the image on the top to prevent the scroll bar from showing based on screen width? Hope that makes sense. Thanks. Hi everyone. I have a header with a menu div inside of it with the following settings: position: absolute margin-left: 250px margin-right: auto and height... Now, below that menu, I have a sub menu - it uses the same settings, with a bigger height of course, but it is styled completely different. The idea is, I want the sub menu to be different for every page the user is on. The main menu may change, I.e., have an extra menu item in it for specific pages. So, this is what I am trying to achieve... If MAIN MENU is a longer length then SUB MENU, I would like the sub menu to be the same width. Keeping in mind that the main menu is fluid and width is not set. Now, alternatively, if the SUB MENU is longer than the main menu, I would like the main menu to be the same length as the sub menu, again, keeping in mind that the sub menu is also fluid and will change width depending on the number of menu items. I mean, I know I could just set some arbitrary width for both, something I am sure will be wide enough despite what is inside of each menu, but I'd really rather avoid doing that, I don't want them both to always be X width, rather, I want the width to be able to change, but both at the same time, not one or the other. I hope that explains what I'm trying to accomplish here, if not, please feel free to ask any questions that would help you understand what I mean better. Thank you much. I am having a problem trying to get one column match the height of another. Within a large DIV box, I created two columns separated by about 20 px. I floated one to the left, then pushed one over to the right. Both boxes will expand depending on the amount of content, but I would like them to match the same height. The boxes will be used throughout the entire website, so it would not make sense to create a background image to try and trick it into being the same height.. or actually specifying the height. Is there any way to tell the left box to be the same height as the right box?? I tried to link to my site but it won't let a new member link to a website. |
|||||||