Here's my code: http://pastebin.com/gjyKH5hD
Live example: http://rusti.dk/test/
I honestly don't know what I'm doing wrong. I've been fiddling with this for days now. I thought it was a simple task, apparently not for me. Would really appreciate a bright mind to help me out.
Basicly all I'm trying to make is two divs next to each other centered on the page. With a 1px black border going all the way around and inbetween.
Left box: 350px width, 600px min-height, used to display facebook like box.
Right box: 450px width, 600px min-height, used for the content of the page.
Background: One big image.
Could anyone help me out? I think it's the FB-likebox that might be the troublemaker, but I'm really not sure. :/
You've missed one closing </div> for the left box.
See: http://jsfiddle.net/2qj5a/
I've added it in line 12.
Related
I'm having a problem achieving the layout for a website I'm designing.
There are three blue divs across the top of the page under which I have placed four red divs. Each of the red divs will take up just less than a quarter of the width of the page.
After putting an input field in the right most blue div the position of the red divs gets shifted to the right and some red divs appear below others.
I've tried changing the position properties on various divs but can't seem to restore the layout I wanted and have tried adding margins but to no avail.
Can anyone see the problem in my code and/or layout? Any help will be greatly appreciated, I've included all the code in a JSfiddle page.
Many thanks.
http://jsfiddle.net/4cb5za9y/
enter code here<style type="text/css">
There was simply a </div> missing after your input, which broke the layout. Here's the updated fiddle.
i'm getting extremely frustrated here. i can't seem to get my centered column to extend all the way to the bottom of the page. i tried clearing floats, and i tried messing with the height of the body and html and columns, but it's not working.
i'd really appreciate it if someone could take a look and tell me what's going on. i just can't seem to figure it out, and this isn't the first time i've had this problem. i don't understand what's happending.
http://www.thefittedshirtchicago.com/tfs.html
if you scroll to the bottom, below the icons, there is a little bit of space where the lighter background shows through. i can't seem to get that to go away. the black of the center container is supposed to extend down behind it. it's especially evident if you change the size of your window.
any tips would be very helpful.
It seems you have the following after the (clear-div that follows the) footer-div:
<br />
c
Try removing that!
Firstly, I'd like to say that I don't want to do this with Javascript.
http://jsfiddle.net/WqrBY/2/
In this jsFiddle, I've got two columns but the bottom right div is obviously aligned with the bottom left. I'd like to be able to (without adjusting the markup) move the bottom right div just under the top right (just like how the bottom left is under the top left).
I don't want to change the markup because the order of the divs is important when it switches to a one-column layout for smaller screen sizes.
Can anyone help me out here?
I'm going to preface this with saying I'm not sure why this works... I'm going to keep fiddling to test it. Comments welcome.
Here's my fiddle
Edit:
I know that you specifically mentioned that you don't want to 'change' the markup because of the div ordering. Would you be open to adding to the markup? This shouldn't change the order of information, but it might be a simple fix to what you're trying to do: http://jsfiddle.net/tracyfu/WqrBY/7/
Before to ask my question, take a look at this: http://db.tt/IdmsYZYS
I have some trouble with let black image touch the bottom, the top and the right side of the text box. So that in fact the black image will cover the whole right part of the spitted box.
I am using Wordpress. Maybe you have some tips for me. But just HTML code is also great.
Thansk a lot for helping me!
You can't set an element to have 100% height within a container that has a fluid height. You should try using the Faux Column technique, which solves your problem.
Im a novice, apologies up front if this is unclear! I know what I want, but Im not sure how to get there or if its even possible with HTML/CSS. Ive been trying for a week with no luck.
The main content area is 955px wide. In the header, I have a logo in the upper right corner of this 955px width, but would like the logo to continue to the right, for computers that have a higher res. So the main header area is set to margin: 0 auto, and I can put a 1px wide sliver to repeat to the right which is ok, but I would prefer the image to continue, not just some boring gradient.
Is this possible?
I created this image to show what I mean but cant post it because i need 11 rep and have 10. ;)
In it, the logo has been split into Image 1 & 2, but of course, if its possible to overflow the centered 955px wide header, then it could be one image.
I can get it to work fine with two images, as long as the window width isnt altered - then you can see Image 2 moving and doesn't line up with Image 1.
Thank you for any help!
Thanks to both Tullo and COBOLdinosaur - I couldn't get your suggestions to work right (probably more to do with my lack of skills) but you guys helped me figure out the solution to my problem. Here's what I did:
Created the image in one piece, rather than two images. Floated right within a 955px wide main-header container div. And then I used negative margins to push the image further to the right. This seems to work great.
Thanks for the help!
Put the image in a div with a width of 100% and with a background color that matches up nicely with the image. Then for the CSS on the image remove the margin and include
clear:both; float:right;