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.
Related
<body>
<div id="main">
<div class="rightPanel" >
<div class="rightPanelContent"></div>
</div>
</div>
</body>
I have a right sidebar like this and content of sidebar. rightPanel is not appearing at first. I did not set css Width size. When I click a menu, rightPanelContent is filling with html elements and rightPanel is opening.
So I do not want to set width of rightPanel(like 20% of page). I want to set rightPanelContent width percentage of main page 20%. But it is getting percentage of rightPanel, not getting page percentage.
Here is working code jsfiddle.net
Change your markup to this
<body>
<div id="main">
<div class="rightPanel" ></div>
<div class="rightPanelContent"></div>
</div>
</body>
then set
.rightPanelContent { width:20%}
if you want it to have 20% of the viewport
Use Viewport units: vw, vh, vmin, vmax
.rightPanelContent { width:20vw}
I have this html
<div class="portlet-header" style="width: 447px">
<h3>Total Calls Statuses</h3>
</div>
<div id="vertical-chart-total-calls-statuses" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
<div class="portlet" style="background-color:green; float:right; ">
<div class="portlet-header" style="width: 447px">
<h3>Inbound</h3>
</div>
<div id="vertical-chart" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
I don't have any CSS, but I do have HTML. Here is the current result of my code:
http://i.stack.imgur.com/mFEO3.png
I need the green div to be side by side with the red one, how do I do this?
Here’s a JSFiddle:
http://jsfiddle.net/Tn58S/
Put all the content within a container DIV with a width sufficient to hold both portlet DIVs, i.e. with a width of 956px as each of your portlet DIVS contains a CANVAS with a width of 478px. So:
<div style="width: 956px"><!-- your content here --></div>
See this jsfiddle example
After checking the full code provided in your jsfiddle, I recommend the following changes:
chartsclass needs to be wide enough to contain its content, which is 958px. So add a max-width of 958px to this class.
As you have also set chartsclass to a width of 80%, this means that the width of contentArea, which contains chartsclass and informationClass, needs to be a minimum of 1198px, as 958 is 80% of 1198.
As informationClass is set to 20%, it needs to be set to a maximum width of 240px.
As the logoArea needs to be a width of 100%, remove the float: left so that it remains as a block level element.
I've updated your jsfiddle
Just change
<div class="portlet" style="background-color:green; float:right; ">
to
<div class="portlet" style="background-color:green; float:left; ">
and make sure to resize the window to make room for both divs.
Set the widths of the main divs to be 50%
http://jsfiddle.net/yaHwj/
width:50%
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/
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
Is it possible to use a fixed width div and an expanding div? Something like:
<div style="float:left; width:200px">
</div>
<div style="float:left; width:100%"> // expand please
</div>
<div style="position:fixed; width:320px">
</div>
I'd like the middle div to just expand in width and take up whatever is left after position the left and right div. It works fine if I give each of them a width in %, but when using a fixed-width for some, they start overlapping when the browser frame gets small etc,
Thanks
How about:
<html>
<body>
<div style="float:left;width:200px;background:red">
</div>
<div style="float:right; width:320px;background:blue">
</div>
<div style="background:black">
</div>
</body>
</html>
<div style="left:0;width:30px;"></div>
<div style="left:30px;right:0;"></div>
You may need to make them absolute positioned and the parent relative.