I have a menu div and a maincontent div. It displays properly on IE and Chrome, but when I view this on Opera on my Android phone, the menu div and maincontent div do not display the scrollbars, the divs stretch to fit the whole paragraph of text inside, leaving the menu div shorter than the maincontent div.
html:
<div id="contentwrap">
<div id="menu">
<p>Less text in here..............</p>
</div>
<div id="maincontent">
<p>More text in here.......</p>
</div>
</div>
I have specified that the menu and maincontent inherit their height from the contentwrap div so they should fill it?
I cannot work out though why this will not display properly, I have tried this with px and also percentage values and get the same result on the mobile browser.
http://jsfiddle.net/6LCGK/ - this displays fine on here, although on opera, the blue and green divs will not have scrollbars and will stretch to fit all content inside, this leaves the blue div shorter than the green div, exposing the pink coloured wrapper.
Anyone know what is going on?
Many Thanks!
Try to set your body at height 100% .
Related
I have a problem because in my code i have an header with padding(left & right at 8%), but on the content box i dont have padding, and when i reduce the firefox window the content box have not the same width than the header (because padding on the header change this).
So I want to the box content have always the same width than the header, and keep dimensions of the slidebar.
in the content right of the slide bar, I have tried to put the same padding but that does not change because the contentbox have a defined width.
This is a code example:
<header>
<div id="logo"></div>
</header>
<div id="box">
<div id="slidebar"></div>
<div id="content"></div>
</div>
thats the JSFIDDLE :
https://jsfiddle.net/t2h839dt/
(if you reduce the preview window on JSFIDDLE, you see the problem (not same width for header and box content).
Your code seems partially responsive. First of all you should decide which approach you are going to do? either fixed or responsive layout.
Please try the below link is for fixed layout.
[jsfiddle][1]
[1]: https://jsfiddle.net/antonysuthakarj/hLsaotco/
Basically, I have a fixed sidebar (with a fixed width) and a content div (with a max-width).
I want the content div to be centered, and the sidebar to be positionned to the left of this content div.
The problem is, on a small screen or when reducing the size of the window, the content div must shrink and not push the sidebar.
I tried a lot of solutions (floating blocks with fake margin blocks, display:inline-block and white-space: nowrap), without success.
Here's the actual page : http://daimao.info/logique-monde-esprit?testCSS=3 , which adapts great to the size of the screen but has all the content on the left of the window.
Here's a modified page : http://daimao.info/logique-monde-esprit?testCSS=1 , that shows what I try to do, but only display well on large resolutions.
Thanks for any help.
Here is an example of what I think you're after:
Code structure like this:
<div class="container">
<div class="sidebar">
Sidebar content
</div>
<div class="content">
Content
</div>
</div>
Create a fixed space for the sidebar by adding a fixed padding-left value to .container
Set the sidebar width to the same value, float it left, and give it a negative margin-left of the same value
The sidebar will remain the same size and continue to fill the padding-left of the container as the container resizes. The .content will fill the remaining space within .container, resizing as .container resizes.
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.
I have a problem. I have (simplified) this code:
<div class="page">
<div class="leftcolumn">content</div>
<div class="midcolumn">some text
<div class="midcolumn content">more text</div></div>
<div class="rightcolumn">a nice widget, or so</div>
</div>
left, mid and right column are just floated and have apdative (=%) widths, and that works fine. Unfortunately, the height of the three columns are right, they are just the height of the content that's in them. Unfortunately, the div page gets a height of 1px, even while columns in it are way bigger. How do I get the page div to get the same height of the columns. For example, if the largest of the three columns has a height of 1000px, I want the div page to get a height of 1000px. Can anyone tell me how I should do that?
Add overflow:auto to your page div.
i've got the next html:
<div id="container">
<div id="content"></div>
</div>
The container div is 1050px wide and includes only the shadow background that is repeated vertically.
The content div is 950px wide, is positioned at the middle of container div (horizontal) and includes content.
What do I need - that a horizontal scroll bar appears only if the browser window is smaller than content div, but container div shall not cause scroll bar to appear. How can i make it?
overflow-x:hidden does not work.
Thx
http://jsfiddle.net/98Eqf/1/
I would suggest using a media query then, to check if the browser is 950px wide and then make the scrollbar appear. That'll allow you to use overflow-x:hidden; while it's larger and then once it becomes smaller you can just do overflow-x:scroll; and make the bar appear.
http://jsfiddle.net/hobobne/98Eqf/2/