I have
<div id="containter"><div class="column" id="left">
left</div><div class="column" id="right">right</div></div>
.column
{
float: left;
}
Problem is, if i shrink my browser, the right column will wrap.
How can I prevent this?
Thanks
You may try to add a width your container div.
Have you ever try float left div to left and float right div to right?
It works for me (example here)
You just forget a " # id="right> and you must erase / in </div class="column" id="right>
That corrected, I made changes in my example :
http://www.jsfiddle.net/D2TvR/2/
add a width to your container and overflow:auto (else, it won't overflow your floated divs)
Just add a width to your containers (say 50%) and set them to float left. This way, both containers will take only half of the width's screen. That is why you'd better use percentage instead of pixels, as pixels state static width and depending on your question, since you are resizing the browser window, you need to implement the page using fluid width. Here is a working example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.column { float: left; width:50%; }
</style>
</head>
<body>
<div id="containter">
<div class="column" id="left">
This is the left container
</div>
<div class="column" id="right">
This is the right container
</div>
</div>
</body>
</html>
if you have set your site on percentage then
give min-width to the container div so that the inner divs wont wrap
So even if you resize it wont wrap
Related
I am having trouble getting my 960.gs to take up the entire width of the browser. I want the grid to be 100% on resize, that is if I scroll out the text will appear smaller and take up less lines but the grid will still take 100% of the width.
There is this question here When using grid 960, can I still have a 100% width header section? And the answer was to set the top part to 100%. I added the code but this has no effect, neither does setting the body's width to 100% and all divs, ect. What am I doing wrong? Here is the code:
<!doctype html>
<html>
<head>
<title>My Fragment</title>
<meta charset="utf-8" />
<!-- Symbols rendered -->
<meta name="value" />
<!-- Do not need to close -->
<link rel="stylesheet" href="css/960_12_col.css">
<style>
body {
background:green;
}
div {
background: white;
}
.grid_4 {
height: 100px;
}
</style>
</head>
<body>
<div class="header" style="width:100%;"></div>
<div class="mainWrapper container_12">
<div class="grid_4" style="background:red">sdfds</div>
<div class="grid_4" style="background:blue">sdfs</div>
<div class="grid_4" style="background:yellow">sdfs</div>
<div class="clear">sdfds</div>
</div>
</body>
</html>
But this gives me the following result:
I want to see no green space on left side of the red column and the right side of the yellow column but this is not the case. How do I get rid of the space either side?
(Please note I am new to css and Html and have been following the learn html in 30 days, and whatever else I find online.)
First of all - <div class="header" style="width:100%;"></div> is not wrapping your container.
Second: add width: 100% to your mainWrapper class instead of .header, but that i know there is hardcoded widths in 960 grid system, so your columns with .grid_4 will be still width: 300px.
Try with another Grid System with fluid layouts, e.g.: http://www.designinfluences.com/fluid960gs/
I have two divs, and I want to set them so the body div starts below the navbar, but they keep intersecting. How would I make it so that the bodyContainer div is always below the navbar?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<meta charset="utf-8">
</head>
<div id="topBarContainer">
<div id="topBar">
<span id="topBarTitle">Private & Air's Shop</span>
</div>
</div>
<div id="bodyContainer">
<div id="bodyContent">
<div id="mainBodyContent">
test
</div>
</div>
</div>
</html>
CSS: http://pastebin.com/u5Z4ib4q
The css was long, so I put it into a pastebin.
You used 'position:fixed' on #topBarContainer in the css. This means that when other elements on the page are to take their positions, they will completely ignore the #topBarContainer as if it was not there in the first place. So remove 'position:fixed' from the css file. if however you chose to use 'position:fixed' intentionally to maintain the position of#topBarContainer even when the page is scrolled up then you should add the following to #bodyContainer#topBarContainer to force it under the #topBarContainer div
position:fixed;
top:75px;
you have used fixed position #topBarContainer. So that you need to add top-margin in body container
on your css
#bodyContainer {
margin-top:50px;/*the height of your header*/
}
This should do it! :)
I would remove the position: fixed; from your #topBarContainer, that will bring your #bodyContainer right below the navigation.
Optionally, I changed the #topBar's height: 75px; into min-height: 75px;, so you won't lose the content on smaller viewports.
Here's fiddle: http://jsfiddle.net/9me3hob3/
This code should work (in my opinion) but, I ca't figure out why it won't. Thanks in advance
<body>
<div id="wrap">
<div style="margin:auto;"><img src="logo.png" alt="logo"/></div>
</div>
</body>
</html>
EDIT:
I'm trying to center it. It stays in the upper left hand corner. Adding a height and width of auto to both divs also did not work.
If you want to horizontally center the logo then you have to also specify the width of the containing div. Here is a sample code.
<html>
<body>
<div id="wrap">
<div style="width:100px; margin:0 auto;"><img src="logo.png" alt="logo"/></div>
</div>
</body>
</html?
The inner div must have a set width for the margin auto to work.
you need to check 2 things before you set your division's to center.
Doctype : check whether it is not in quirks mode.
Width of inner div must me less that width of parent div.
do check these things you will get your answer...All the best.
Is the width of the inner div less than the width of the #wrap div?
I imagine that the wrap has a set width, the div holding the image will need a set width as well.
Fiddle so you can see that it does work. (a bit overkill for this question, I know :) )
Please take a look at this page:
http://uploads.dennismadsen.com/fullwidth.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="da-DK">
<head>
<title></title>
</head>
<body style="background-color:#e0e0e0;color:#fff;">
<div style="position:absolute;width:100%;">
<div style="background-color:#000;">
<div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div>
</div>
</div>
</body>
</html>
The inner div has a width of 800px and should be horizontal centered if the window is bigger than 800px. Try to see the page in a browser window smaller than 800 px. For instance with a width around 500px. Than the black background is not having full width when you scroll right. Why?
<div style="background-color:#000;"> is inside <div style="position:absolute;width:100%;">, which width equals the width of the screen. So, <div style="background-color:#000;"> width also equals the width of the screen. As right this div sets the black background, the background width also equals width of the screen, not more. So it does not extend to the right.
UPDATE
You can use just two divs:
<div style="background-color:#000;">
<div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div>
</div>
Sorry, does not work either. Leaving it here as a non-working sample for reference.
UPDATE 2
And now the working variant:
<div style="background-color:#000;min-width:800px;width:100%">
<div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 800px</div>
</div>
This works :)
<body style="background-color:#e0e0e0; color:#fff;">
<div style="position:absolute; width:100%;">
<div style="background:#000; width:800px; margin:0px auto; text-align:right;">Container width a width of 1500px</div>
</div>
</body>
I'm not sure I entirely understand the question, but what I think you are asking about is centering the object without it getting smaller than 800 px. What I would do is make a container div and then the internal div:
<div style="width:100%; min-width:800px; background-color:#000;">
<div style="background-color:#fff; width:800px; margin:auto;">
</div>
</div>
With the first div being the container that stretches the whole length of the screen, but does not get smaller than 800px, the second div being the div in question, with a set width of 800px and having the margin set to auto should make it center in the container div.
HI, can someone please help me with this. I have:
<html>
<body>
<div style="width=100%">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
Which gives me exactly what I want, a Red div on the left with a Green div beside it taking up the rest of the width with a Yellow div beside the Red but below the Green div.
However the parent div actually has to also float left ie.
<html>
<body>
<div style="width=100%; float:left">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
This breaks it. Is there a way to get it working again with the parent div float left?
if you float the parent div, in order to keep them all in the parent container, you must also float them all. Those inside without float will fall out.
Edit: Note though that once you float them, width:100% means nothing anymore since the element don't know what to align 100% width with. Might have to give it some fixed width, or use JQuery to get width from document.
http://jsfiddle.net/robx/cpFUV/
It breaks it because a div is normally set to have a width of 100% it's parent container. Setting float:left makes the width set to the content's width. Set a width on your parent container and it should fix it.
You wrote width=100% instead of width:100% - fixed example:
<html>
<body>
<div style="float:left;width:100%;">
<div style="float:left; background-color:Red; height:100px;">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
The reason it worked originally, is that there is an implicit width of 100% on block elements, but you made your div an inline element (of sorts) by adding the float (such that the width of the div reverted back to the content's width, just as your Red div works).
Your width=100% was always ignored, so by putting the width:100% as it should be, you are specifying a width for the element and all is well.
Example: http://jsfiddle.net/hwb4w/