Search the Community

Hey, I want to bulid a container that has text in it, is partially positioned outside of the parent element and pushes text away (see image below). In order to push text away, this container has to be floated, right? To position the container, I know of 2 ways: 1. absolute positioning (inside a container with relative positioning) 2. relative positioning (and translating the container to the side). The problem: Absolute positioning will make float completely redundant – the container does no longer push text away. And with relative positioning, the area that pushes text away won't be affected by the transform: translate and will stay in the top left corner of the parent element. The closest I have come to is this: <div class="wrapperSingleProject"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p> <div class="relativeposition"> <div class="quote-div"> <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> .wrapperSingleProject { padding: 80px 0 80px 0; width: 750px; position: relative; } p { text-decoration: none; text-align: left; font-size: 17px; font-family: 'Roboto', sans-serif; font-weight: 400; letter-spacing: 0.08em; line-height: 1.45; color: black; } .quote-div p { /* relative positioning */ position: relative; text-align: center; width: 200px; color: blue; background-color: #ccc; float: left; top: 300px; left: 0%; transform: translate(-50%, -50%); /* absolute positioning: you need to activate .relativeposition */ /* position: absolute; text-align: center; width: 200px; color: green; background-color: #ccc; float: left; top: 300px; left: 0%; transform: translate(-50%, -50%); */ } .relativeposition { /* position: relative; */ } Do you guys have any ideas how to make this happen? Thanks a lot!

BACKGROUND: The same HTML/CSS set-up produces different results in different browsers. In this case Firefox and Safari agree, but Chrome does not. I have no idea how the following looks in Internet Explorer. The problem is one of horizontal alignment. For some reason Chrome forces the second input form control (type='submit') to the following line. Surely I could resolve the problem with Flexbox, but I would like to know what is going on instead. The HTML <div id="search_podcast_div"> <div id='podcast_header'> <h1 style='padding-top:1em;'>The Onsite<br />Grammar Captive<br /><span style='font-family:Bradley Hand, cursive;font-size:1.8em;color:#5a4149'>Weekly Podcasts</span><br />Search Engine</h1> <form id='podcast_searchform'> <fieldset id='podcast_field'> <legend>Search and Find</legend> <input id='podcast_input' type="text" class='SearchInput' placeholder='Enter keywords and phrases here ...' name='search_podcast_input' required> <input id='podcast_submit' type="button" class='SearchButton' value="Search"> </fieldset><!-- end fieldset#podcast_field --> <label id="podcast_input_error" class="error" for="podcast_input">Please enter what interests you. Else, there is nothing to search.</label> <p class='Hint'><span class='InlineHeading'>search guide</span>: A phrase surrounded by <em>double</em>-quotation marks<br />returns only those podcasts that contain the exact phrase.</p> </form> </div><!-- end div#podcast_header --> <div id='podcast_matches'>Your matches will display here ...</div><!-- end div#podcast_matches --> </div><!-- end #search_podcast_div --> The CSS #letter_header h1, #podcast_header h1, #qa_header h1 { text-align: left; } #letter_searchform, #podcast_searchform, #qa_searchform { background: linear-gradient(60deg, #5a4149, #f0efef); /* Standard syntax */ text-align: center; width:auto; margin: 2.5em auto 1.5em auto; padding-top: 1.5em; padding-bottom: 1.5em; } #letter_field, #podcast_field, #qa_field { margin-left: 0.5em; margin-right: 0.5em; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } #letter_field legend, #podcast_field legend, #qa_field legend { color: #ffffff; } .SearchInput { margin: 0em 0.5em 0em 1em; width: 80%; border-radius: 15%; } .SearchInput:focus { background: #5a4149; color: #ffffff; border: 1px solid #ffffff; } .SearchButton { margin-right: 1em; border-radius: 5px; color:#5a4149; } .SearchButton:hover { background-color:#5a4149; color:#ffffff; } label.error { display:block; /* clear:both; float:right; */ color:#fadb9d; font-size:0.8em; font-weight:bold; margin-top:0.5em; margin-bottom:0.5em; } .Hint { font-size: 0.6em; color: #ffffff; font-weight: bold; } .InlineHeading { font-variant: small-caps; } jsRoddy You can view the resulting phenomenon by clicking on either Newsletters or Podcasts under the subheading Search Grammar Captive in the navigation bar of the Grammar Captive mainpage.

I am using the Float page in CSS from this site to teach my coding class and I was wanting students to float their image next to the paragraph and heading in the example below but I can't get it to work. Every time I have tried to add a picture it will only appear below the paragraph and not next to it. I've tried giving the image a class of "column pic", I've tried giving it it's own division and and floating it to the right, I've put these divisions in multiple places and used multiple css but I can't get it to work. I ended up using the absolute position property to move it to the position I wanted. Any help is appreciated! This is a link to the Tryit: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_cols <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="clearfix"> <div class="column menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="column content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>

Hello! I am quite new to CSS, and have learned much the past months, but I still have some things that trouble me and i struggle to find a sollution. I do work with div tags. Problem 1: At the right, you can see "New Comics" with an unorderd list consisting of two items at this moment. The date is "float: right". it shows good on my screen, and any other medium to large screen resolution, but once it gets to small, the date gets ON the border line. I tried: min-width:300px Result: It jumped UNDER the content that should be on the left of it. URL: http://www.nimblefeather.com/index.php Problem 2: The images here are floating right and left respectively. Again, on my screen, or any other large screen, there is no visible problem, but once you start resizing the screen, the text does no longer fit into the div's. I tried: min-width. Result: No visible change. URL: http://www.nimblefeather.com/comics.php Problem 3: When resizing the width of the comic images gets adjusted, but the height does not, resulting in well, a weird image. The height should also change accordingly. In addition, on smaller screens the word (heading1) Chapters sometimes sticks out of it's Div. How would this be solvable? URL: http://www.nimblefeather.com/comics/drawingshady/thefutureofsumarnya/chptr1.php Question: Is it possible to make the website appaer like on my screen on other resolutions as well? By simply "resizing it" to their resolution (example: My resolution: 800 x 600, and visitor X resolution 400 x 300, to let the CSS resize the page to 50%, including text and images,...?) Thanks in advance =D

Hi guys it's been forever I haven't touch code and I ended up with this situation. I have no problem to display the page with IE and FF. I have a div that contain embedded posts from a facebook page that should not exceed 500px by 500px and keep the left of the page. On the right there is an other div a little bit smaller that should float right but for some reason the facebook div seems to clear right only with chrome. I've been trying to wrap it, force my other div, and find a hack but no success. Since every attempt failed I went back to my original code. Your help is appreciated, thx! the address of the page is http://www.matpatnik.com/White-Spiders css: /****************** #desc Style ******************/#desc{ float: right; width:450px; max-width:450px; display:block;}#desc>.innerBox>.contentBox{ height: 484px;} html: <div class="outerBox fb-page" data-href="https://www.facebook.com/WhiteSpiders" data-width="500" data-height="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true" data-show-posts="true"> <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/WhiteSpiders"> <a href="https://www.facebook.com/WhiteSpiders">WhiteSpiders</a> </blockquote> </div></div><div id="desc" class="outerBox"><div class="innerBox"><div class="contentBox">

Hi there The problem is with the projects page on my site: http://mvec.io/projects It works fine on 1920 x 1080 with browser maximized. When I horizontally resize the browser, .project_column2 goes underneath .project_column1 How can i keep the .project_column2 box to the right of .project_column1?

I would appreciate your help with layering a widget title with a background over a slider. The demo site appears here: http://acceleratedpowermarketing.com/reicher/ I want it to look like this: http://www.standrewsch.org/ Where the bar with the title doesn't move when the screen is zoomed. Using this code, I'm able to get it to look like I want if it's zoomed at the correct place. Otherwise the bar, is out of place. I want to learn how to do this with blocking if that is possible and will solve the problem. Thanks #it_widget_content-5 .widget-title { background: url("images/Home-Page-Banner.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0); color: #fff; font-size: 2em; font-weight: normal; padding: 0.35em 0.5em; position: absolute; right: 15%; text-indent: 0; top: 30%; z-index: 995; }

Hello all, I have a master div (#master) and inside it I have other class boxes. I want to align my contentbox class up against the left border of my master div, but there is always a space there of about 10px. I am editing a tutorial file which I followed, so perhaps the original tutorial specified this space somewhere, I don't know, but I can't get rid of it. I have tried combinations of float-left, margin and padding none and played around with positioning but have had no joy. My master file CSS is: #master /*the box we work in - struggling to get this tight up against the header*/ { width: 1024px; height:auto; background-color: rgb(255,255,255); padding: none; padding-left:none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border: 1px solid #999; /*replace with border: none; after the images have been alligned*/ } The content box class which I want to place within my master 'frame' and have aligned to the left is as followes. There are three content boxes but I want the first one to be placed to the left, within the master div. I have attached code for contentbox and associated images... .contentbox { width: 300px; margin: none; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: none; border: none; float: left;} .contentbox p {font-family:verdana; font-size:80%; line-height:140%;} .contentbox img { margin-bottom: 10px; border: none; padding-left: none; margin-left: none; float: left;}

Hey there, I know this is somewhat of a rookie problem, but I'm a little rusty on the subject of float, since my more recent projects haven't dealt with it much. I have created a two-column layout (main content and a navigation sidebar) with floating divs. However, at a certain zoom level the sidebar is kicked down below the main content div. I'm trying to figure out how to keep the two columns side-by-side on the page, no matter what the zoom level is. I used to know how to do this, but as I said, I'm a little rusty in this department. Any help would be greatly appreciated. The url is: http://www.zyggywebs.com body { background-color: white; background-image: url(banner-new2.jpg); background-position: center top; background-attachment: fixed; background-size: 160%; color: black; padding: 20px;}a { color: yellow;}a:hover { color: steelblue;}#header { background-color: black; background-position: left bottom; color: white; padding: 10px; height: 130px; border-radius: 1em;}#main { float: left; width: 960px; background-color: black; opacity: 0.800; color: white; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; min-height: 700px;}#sidebar { float: left; background-color: black; color: white; height: 500px; width: 200px; margin-right: 10px; margin-left: 10px; text-align: center; border-radius: 1em; opacity: 0.800;}#sidebar img { max-width: 150px; border: none;}#footer { clear: both; background-color: black; color: white; padding: 10px; margin-top: 20%; border-radius: 1em;}#galleries img { width: 20%;}.section { padding-bottom: 25px;}

Hi there! I was just wondering, there is a theme named 'Tetris' for wordpress. (Link) When posts are placed they float to the left and line up to the top neatly. Well currently i am creating a wordpress based website, and on the pages i use '#homediv' to id the div's that i want to do the same. Problem with how i coded it: they do float left, but do not line up to the top... I tried to search the code of 'Tetris' how they manage to do it, but couln't figure it out. If you know how to make this happen please tell me (and the others that search for the same problem on Google and land here). Code as it is now: /*CSS OF HOMEDIV:*/ #homediv { width:45%; min-width:180px; float: inherit; border:solid 1px #7D1517 ; margin:1%; border-bottom-left-radius:10px; -moz-border-bottom-left-radius:10px; -o-border-bottom-left-radius:10px; -webkit-border-bottom-left-radius:10px; border-bottom-right-radius:10px; -moz-border-bottom-right-radius:10px; -o-border-bottom-right-radius:10px; -webkit-border-bottom-right-radius:10px; padding-bottom:15px; } #homediv h5 { text-align:center; background:#7D1517; color:#FFF; } #homediv h6 { margin-left:3%; margin-right:2%; } #homediv p { margin-left:2%; margin-right:2%; } Image example: As you see, they do not line up to top. Thanks in advance! - Marcel

Hey, been awhile... So I am playing around with fluid/responsive website design and I have hit a block relating to Max-Width being ignored when using Float. I know this is just how it is (honestly I can't understand the logic of why though), but is there a way around it? Simply I got this: <div id="wrap"><div id="left">Content</div><div id="right">Content</div></div> #wrap {width: 900px;}#left,#right {max-width: 450px;min-width: 320px;float: left;} The result is both #left and #right become 320px wide divs floating left... To outline quickly what I want to happen just incase I am approaching this all wrong... I want the two divs side by side until both of them squeeze down to 320px as a result of a different device screen size or the shrinking of a browser window. After this the right div will drop under the left div and they both will resize to fill the remaining space until again they are squeezed down to 320px... Thanks for any input.

I am trying to get our social media icons to stay in place, no matter how zoomed in or out you are (ctrl+scroll). We have clients with varying monitor sizes, technologies, browsers, etc. The website is www.cleantelligent.com Currently our icons are floated and aligned right, so no matter how you look at it, they line up with the right side of the screen. How do I get them to "stick" right under the "get started" button, no matter where you look? There's a lot of CSS formatting on this page that deals with the slider right below and I don't want to displace or mess anything else up. Is there any way to get them to stay right under the button while in their own div, span, aside, or whatever? The code is as follows:Quote:<div id="main"> <div id="primary" class="showcase"> <div id="content" role="main"> <article id="post-89" class="post-89 page type-page status-publish hentry intro"><header class="entry-header"><h2 class="entry-title">Home</h2> </header><!-- .entry-header --> <div class="entry-content"><!--SOCIAL MEDIA ICONS--><div style="align: right; float: right; padding-right: 50px;" id="first" class="widget-area" role="complementary"><aside id="text-2" class="widget widget_text"><div class="textwidget"><div class='footer_social_icons'><a href="http://www.facebook.com/CleanTelligent"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="http://www.linkedin.com/company/cleantelligent_software"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="/news-and-events/rss.xml" ><img src='/wp-content/uploads/2012/05/Blog-button.png' ></a></div></div></div><!--END OF SOCIAL MEDIA ICONS--> <div class='slider' id='slider-1'><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/uploads/2012/02/clean-slide-1.jpg" alt="Slide 1" /><div class='slide-desc'><h2>Productivity</h2>We believe technology is not only for automation, but for empowerment. <a class="alignright" title="Productivity" href="/about-us/janitorial-service-software/efficiency-in-the-workplace/">Meet and Exceed Expectations</a> </div></div>

I'm having some trouble getting multiple divs floating next to each other. Here's what I have so far: .content { width:auto;max-width:100%;float:left;padding:15px;} which gives: However I'm aiming for: Any ideas?

The div "rightLines" is extending past the display window in the browser, which is creating an unwanted horizontal scrollbar. Based on the CSS, I can understand why this is happening, but the confusing part is that the same thing doesn't happen for "hNavigation." Why is this? What I'd like to accomplish: To have the "hNavigation" div, and the "rightLines" div to fill the remaining space (of the window) on either side of the "mainContent" div, without having to specify a specific size for both. Perhaps this would be better accomplished with tables? Any help would be appreciated. Here is the code: <body id="theBody"><div id="mainSection"> <div id="theHeader"> <div id="headerStripes"> </div> </div> <div id="hNavigation"> </div> <div id="rightLines"> </div> <div id="mainContent"> </div> </div></body> /** MAIN PAGE **//*==== universal ====*/a {text-decoration: none;}img { border-style: none; text-decoration: none;}#theBody {margin: 0px;padding: 0px;}/*==== header ====*/ #theHeader {height: 80px;width: auto;background-image: url(header-color.png);background-repeat: repeat;position: relative;} #headerStripes {height: 75px;width: auto;background-image: url(diagonal-lines-pattern.png);}/*==== mainContent ====*/#mainSection {background-image: url(diagonal-lines-pattern.png);margin-left: auto;margin-right: auto;background-repeat: repeat;height: 100%;width: 100%;position: absolute; } #mainContent {width: 800px;height: 538px;padding-top: 32px;margin-top: -5px;margin-left: -400px;background-color: #f9e6d7;z-index: -100;position: relative;left: 50%;}#hNavigation {background-color: #000000;width: 50%;height: 564px;margin-left: -400px;float: left; }#rightLines {background-color: #000000;width: 50%;height: 564px;float: right;margin-right: -400px;}

Dears, I have a problem with wrapping text arround image Here is my code <div id="content"> <div id="block-system-main" class="block block-system no-title"> <article id="node-30" class="node node-nieuws article clearfix" role="article" typeof="sioc:Item foaf:Document" about="/nieuws-test-1"> <div class="node-content"> <div class="field field-name-body field-type-text-with-summary field-label-hidden view-mode-full"> <div class="field-items"> <div class="field-item even" property="content:encoded"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida blandit ante id tempor.</p> </div> </div> </div> <div class="field field-name-field-nieuwsafbeelding field-type-image field-label-hidden view-mode-full"> <div class="field-items"> <figure class="clearfix field-item even"> <img class="image-style-medium" width="220" height="165" alt="" src="http://www.pilatesbodycenter.be/sites/default/files/styles/medium/public/Koala_0.jpg" typeof="foaf:Image"> </figure> </div> </div> </div> </article> </div></div>my CSS.node-nieuws .field-name-body {background:#ff0000; float: left;}.node-nieuws .image-style-medium {float:right;background:#0000ff; padding:5px;} Nomatter what I do, image alwasy stays under text en is not wrapping kan somebody help please? Here is the page livehttp://www.pilatesbodycenter.be/nieuws-test-1

Hello. I've created a page that has a grey body and a background image within the container in the body. The container will not show the background image when centered. I read up on this online and found that if I float the container to the left, the background image shows up. Sure enough, it worked, but I want my container centered. Does anyone have a work around for this? Here is the page http://aphoniastudios.com/TestSite/t3/ and here is the css: @charset "UTF-8";/* CSS Document */ html {height:100%}body {background: #CCC;width: 95%;height: 95%;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#e22426; text-decoration:none;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 2.1%;background-image: url(Images/background1.jpg);img {max-width: 100%;}background-size: 100%;background-repeat:no-repeat }#column1 {float: left;position: relative;width: 230px;height: 100%;max-height:688px;margin: 0px .5% 0px 7%;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding:8px 4px;}#p {font-size:13px;position:absolute;bottom:100px;line-height: 17px;}#column1 #footer {background-color: #e22426;padding: 8px;box-shadow:3px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;position:absolute;bottom:0;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 10%;height: 100%;color:#4D4D4D;font-size: .65em;font-weight:900;}nav {position: absolute;z-index: 2;background-color: #999;width: 10%;height: 100px;margin-top: 52px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {display:block;list-style-type: none;margin: 10px;padding: 0px;line-height:65%;}#column3{float:left;margin-top: 52px;margin-bottom: 0px;position: relative;z-index: 1;width: 285px;height: 60%;padding-top: 30px;padding-right: 20px;padding-bottom: 20px;padding-left: 150px;.aboutlinks {word-spacing: 2px;color: #e22426;}#column4 {float: left;position: relative;left:-100px;width: 20%;height:100%,padding: 0px;}

I have run into a problem coding for a background image to be positioned absolutely to the top right of my column3 div container. I've attempted to give the image the following properties: position:absolute; top:0; right:0However, the image shows up, on the top left instead of top right. That said, the image is in a div that is floated left and has a z-index and therefore a position of relative. This is the only thing that I can figure to be causing the problem. If you think this is the problem, is there any way around it? If you don't think this is the problem, what might it be. On another note, something I hope you might help me understand is why the background-repeat:no-repeat; only works outside of the img style. I would expect it to work inside the img style, but instead it repeats. Thanks in advance for your help. Here is a link to the page http://aphoniastudio...2/about_ss.html and here is the css: @charset "UTF-8";/* CSS Document */ html {height:100%}body {background: #CCC;width: 95%;height: 95%;overflow: hidden;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#FFF; text-decoration:none;}ul:active {background-color:#E1231E;}ul:visited {background-color:#E1231E;}.aboutlinks a:visited {color:#E1231E;}.aboutlinks {color:#E1231E; word-spacing:12px;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 2.1%;background-image: url(Images/conference1_ss.png);img {max-width: 100%;}background-size: 100%;background-repeat:no-repeat }#column1 {float: left;position: relative;width: 230px;height: 100%;max-height:700px;margin: 0px .5% 0px 7%;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding:8px 4px;}#p {font-size:13px;position:absolute;bottom:100px;line-height: 17px;}#column1 #footer {background-color: #E1231E;padding: 8px;box-shadow:0px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;position:absolute;bottom:0;}.stretch {max-width:100%; max-height:100%;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 10%;height: 100%;color:#4D4D4D;font-size: .65em;font-weight:900;}nav {position: absolute;z-index: 2;background-color: #999;width: 10%;height: 100px;margin-top: 54px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {display:block;list-style-type: none;margin: 10px;padding: 0px;line-height:65%;}#column3{float:left;margin-top: 54px;margin-bottom: 0px;background-color:#FFF;position: relative;z-index: 1;width: 30%;height: 80%;padding-top: 30px;padding-right: 2.8%;padding-bottom: 20px;padding-left: 5%;box-shadow:3px 3px 5px 0px #333333;overflow: auto;background-image: url(Images/triangle.png);background-repeat:no-repeat;img {position: absolute; right:0; top:0;max-width: 100%;}.aboutlinks {word-spacing: 2px;}#column4 {float: right;width: 20%;height:100%,padding: 0px;}#container #column2 nav ul li {}

My css layout consists of a wrapper grid containing three divs, "left", "middle" and "right" (see the code below). I marked their borders with a dashed line so I can see their behaviour when resizing the window. How should I change my code in order to prevent the browser from wrapping the right part down? (see also the attached images below) 1. the html code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head><link rel="stylesheet" href="css/style-grids.css" /></head> <body><div class="wrapper"><div class="left"></div><div class="middle"> </div><div class="right"> </div></div> <div class="nplogo"></div></body></html> 2. here teh css: html{width:100%;height:100%; } body { border-width: 0px; padding: 0px; margin: 0px; width:100%; height:100%; min-width:100%; min-height:100%; /* font-size: 0.9em;*/ background:#000000 url(../images/sky-tile-halves.png) 50% 0 repeat-y;} .wrapper{ position: relative; float: left; left: 0%; width: 100%; height:100%; /* border-color:red;border-style:dashed;border-width:2px; */ background-color: transparent} .left{ position: relative; float: left; left: 0px; width: 33.3%; height: 100%; margin:0px; border-color:yellow;border-style:dashed;border-width:2px; background-color: transparent;}.middle{ position: relative; float: left; left: 0px; width: 33%; height: 100%; border-color:green;border-style:dashed;border-width:2px; background-color: transparent;} .right{ position: relative; float: left; left: 0px; width: 33%; height: 100%; background-color: transparent; border-color:red;border-style:dashed;border-width:2px; }

<?phprequire_once('includes/i_rsslib.php');require_once('functions/f_lib.php');?><!DOCTYPE html><html><head><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"></head><body><div id="wrapper"><?php require_once('includes/i_header.php'); ?> <div style='margin: 5px; padding: 5px; border: 1px solid white; height: auto; clear: both; overflow: hidden;'><div style='float: left; width: 48%; height: 100%; border: 1px solid blue; overflow: hidden;'>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war.We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor powerto add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished workwhich they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion tothat cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have anew birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.</div><div style='float: left; width: 48%; height: 100%; border: 1px solid blue; overflow: hidden; margin: 0px 0px 0px 5px;'>Governor Stevenson, Senator Johnson, Mr. Butler, Senator Symington, Senator Humphrey, Speaker Rayburn, Fellow Democrats, I want to express my thanks to Governor Stevenson for his generous and heart-warming introduction.It was my great honor to place his name in nomination at the 1956 Democratic Convention, and I am delighted to have his support and his counsel and his advice in the coming months ahead.With a deep sense of duty and high resolve, I accept your nomination.I accept it with a full and grateful heart--without reservation-- and with only one obligation--the obligation to devote every effort of body, mind and spirit to lead our Party back to victory and our Nation back to greatness.I am grateful, too, that you have provided me with such an eloquent statement of our Party's platform. Pledges which are made so eloquently are made to be kept. "The Rights of Man"--the civil and economicrights essential to the human dignity of all men--are indeed our goal and our first principles. This is a Platform on which I can run with enthusiasm and conviction.</div></div> </div></body></html> So I have created this skeleton example of a two column layout. While the content of each column may vary I would like the borders of each column to match each other. I thought that I might be able to put the columns in a wrapper, float them and then use the 'height: 100%' CSS property on both columns. Unfortunately, solving the problem is not that simple. Does anyone know a way to do this? I had a layout before that was alright but if I could somehow get to the solution for this one it would look that much nicer. Is what I am trying to achieve with the layout possible? I uploaded a live copy to http://dailysportsguide.com/prototype/. Thanks again and in advance for any of your most useful comments and suggestions. P.S. I already have a plan to accomplish the same goal with some jQuery however if this can be done with CSS I would much prefer that method...

Is there any way to center floating elements? I tried using something similar to http://www.pmob.co.uk/pob/centred-float.htm, but it always came out a little uneven. I need something that is absolutely in the center.

I am new in the foray into HTML and am attempting to create a page, but as far as the page goes I always have issues with my navigation barIs this a result of bad coding and markup? My HTML5 does validate, so does my CSS. When I set the li to float left to create a vertical bar the entire bar dissapears off the screen not to be found anywhere...HTML5 code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Homepage</title> <meta name="description" content="fromthericefields, blog, home" /> <meta name="author" content="Joseph Davies" /> <link rel="stylesheet" type="text/css" href="header.css" /> </head> <body> <header id="mainheader"> <hgroup> <h1>fromthericefields</h1> <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit</h2> <h3>Proverbs 18:21;</h3> </hgroup> <nav> <ul> <li><a href="signin.html">Sign in</a></li> <li>|</li> <li><a href="register.html">Register</a></li> </ul> </nav> </header> <nav id="mainnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">Blog</a></li> <li><a href="index.html">Gallery</a></li> <li><a href="index.html">About</a></li> <li><a href="index.html">Contact</a></li> </ul> </nav> <section> <article> <h4>Setting up fromthericefields:</h4> <h5>Posted on 10/5/12</h5> </article> </section> <aside> <blockquote> </blockquote> </aside> </body> </html> The CSS: body { } #mainheader { background: blue; margin-top: -25px; margin-left: auto; margin-right: auto; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; height: 200px; width: 1000px; } #mainheader hgroup { padding-top: 10px; width: 1000px; } #mainheader h1 { font-style: italic; color: #ffffff; text-shadow: 5px 5px 5px #000000; font-size: 40px; } #mainheader h2 { font-style: oblique; font-size: 20px; color: #FF0000; margin-left: 20px; margin-top: -20px; } #mainheader h3 { font-family: monospace; font-size: large; color: #AAAAAA; margin-left: 600px; margin-top: -10px; } #mainheader nav { margin-left: 810px; margin-top: -130px; } #mainheader ul { list-style-type: none; } #mainheader li { text-align: center; display: inline; color: white; } #mainheader a { text-decoration: none; color: white; } /*Main Navagation Bar*/ #mainnav { width: 900px; background: red; border-bottom-left-radius: 25px; border-bottom-right-radius:25px; margin-left: auto; margin-right: auto; } #mainnav ul { list-style-type: none; margin-left: -2.5em; } [b] #mainnav li { display: inline; border: solid; }[/b] #mainnav a { text-decoration: none; color: white; text-align: center; } The place where the issue occurs is in bold.setting the display to inline, when I go to adjust the width, nothing happens but they stay the same sizeset it to float: left the whole thing dissapears!Why?