I'm currently working on a webpage.
Basically it's two sections. The main section is taking up all of the screen that the sidebar on the right isn't. The sidebar is fixed and set to 250px wide. The main section is set to 100% width with a margin-right of 250px.
Now I put down a few test blocks to see how it would look, they're 300px x 300px. As you can see, the last block on the top row goes behind the sidebar.
How can I make it go to the next line instead of going behind the sidebar?
Thanks in Advance.
The reason the block is not wrapping is because it is ignoring the margin right.
Without the CSS it is difficult to give an exact solution, but I would suggest a simple solution would be to float the side bar right and the main div left. Then you must remove the margin right on the main div.
This will allow you to keep your fixed pixel size, although using percentage in most causes is more suitable. I hope that helps.
Maybe the reason is width: 100% for the main section?
.main {
width: auto;
margin-left: 250px;
}
From the understanding of your screenshot, I assume you should add "Position" tag to determine the priority of the div and i suggest you to use % instead of px in nested div tags.
Related
So, I have a navbar on the top, footer on the bottom and a big image in the center. I placed everything using margin (margin-top: 0 for nav, margin-bottom: 0 for footer and margin: 3% auto for image. The image is centered on my page and everything is allright. However, when I set position of nav bar to fixed, the margin for image seems to count from the beginning of page instead of the end of navbar (it causes my image to overlap with navbar instead of being in between of footer and margin). The only way I know to fix it is making a second, invisible div with the exact same size as my navbar, but I believe it's not the most practical way.
I don't know if putting HTML/CSS code is necessary there, I think I described everything important.
Thanks in advance for help
try position:sticky. it works best if you have fixed height of element.
Setting position: fixed removes the element from the document flow. One possible solution is to add a container for the content, in your case a container div for the image, and set a fixed top margin or top padding on the container for the height of your navbar.
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
Hi im trying to position my website in the centre of all resolutions however when i wrap the entire page in a container div and try styling it nothing happens , below is the CSS i use :
CSS
.container {
width: 95%;
margin-right: auto;
margin-left: auto;
}
Any suggestion on how i can fix?
Your container div IS centered but you've set margins on the left side for the nav element of 220px. I have not looked at the others yet but I presume you have left margins set on those, too.
Also, your elements inside the container are positioned absolutely which will take them out of the normal flow. If you want those elements to be attached to .container then you need to make it position:relative.
Something I mentioned in my previous comment above, you have to remember that when you set a width to a percent to ask yourself, "Percent of what?". It will always be a percent of the width of the parent so the next question is, "What is the width of the parent?". If that's not set then your percentage may not work the way you intend it to, or at all.
I'm fairly new to HTML5 and I don't understand the purpose of different elements very well. I'm trying to use section as wrapper and I'm having a problem of the section not spanning all the way across.
Can you please go to the following web address:
[removed due to solved question]
I want the section to span all the way across the page to cover full width. But when I give it a 100% with, it simply disregards the width taken up by nav and floats down. Is there a way to make the section span across the remaining space in the screen?
Thanks very much
You appear to have floated it left. Getting rid of the float: left rule in section#Maincontainer should fix it.
If i understood correctly what you want to span across is the menu section .. now percentage width is always relative to its container .. so if the container`s width was 900px then the elements inside if had a 100% width will have 900px
i have used this css code and it worked fine
section#maincontainer {
width: " put the value here";
}
now usually if you dont specify a width, the elements takes all the space available, but in your case you have specified a float which forces the element in a specific area, removing float will work fine
Basically, I am looking for a way to center a container that is 1600px within a container that is 940px.
I want the page to stay centered at all times, and the main content of the site is 940px wide. I have an image that is 1600px, and just adding the image forces the image to align left with the 940px container and overflow to the right 660px. See the image below for an example.
What I want is the image to center within the 940px container, and save for adding multiple background images, which really isn't pre IE8 friendly, I am at a loss.
I've never really had to do this before, so I've never run into this problem.
Right now, I have the page set to a master container of 1600px. This works, but when you open the page, the page starts at the far left of the 1600px container and the main content appears uncentered.
Example 2 below is what I am looking for.
Any help is greatly appreciated. Thanks guys and gals!
Or you could just center the 1600 container relative to the Page using the following attributes:
left: 50%;
margin-left: -800px;
You can use javascript to get the width of both divs, then take the difference between the two (1600-940=660px). Divide that by two for centering (330px). Then position the container left that amount (-330px).
You can set a negative margin on the image. You can use Javascript to compute the actual number, but if it's always going to be 1600 within 940, then you can set a negative margin of 330px.
(Container width - Content width) / 2 = Left Margin
#container img { margin-left: -330px; }