I have one main div covering the 100% of the available space in webpage, and it contains three others divs, like this:
<div id="container">
<div id="header"/>
<div id="content"/>
<div id="footer"/>
</div>
I need two of them (the yellow ones) to be resizable, because their content is dynamic and sometimes need more than a single line of text. So, what I need is they cover the 20% of the available space but if they need more to resize and make the center div smaller. What should I read about? I don't find the keywords to google it. Thanks a lot!
This is a "not-working demo" haha:
Use the CSS min-height property on the header and footer divs, and remove the height property from the content div.
#header, #footer {
min-height: 20%;
}
I don't believe these answers are understanding the question.
If I get you correctly, you want to have the top and bottom be some minimum height (say 20% each), and the center fill the rest.
In that case you will have to use JavaScript. Find the height of window and set top and bot to have a min-height. This will allow them to scale. From there you will get the height of the head and the foot, subtract them from the height of window, and set the content area to be that height.
I would write you out an example but it sounds like you want to do it yourself, which I commend.
Related
I've been trying a few techniques, but I'm getting stuck on this problem. I want to do the whole 100% height columns within a section thing, but one column has an image which needs to scale to fill one column.
So I have one column of text (variable content from WordPress) that is 66% wide and one column that holds an image and is 33% wide. The image can be on the left or the right based on a class.
My HTML:
<section class="page-section color-brand left-image image-third">
<div class="page-section-mid-wrapper">
<div class="image-wrapper left-image image-third">
<img src="img.jpg" alt="">
</div>
<div class="page-section-wrapper">
<div class="page-section-content">
Variable content here
</div>
</div>
</div>
</section>
Most of the CSS techniques do tricks to get a solid background color in both columns. But in this case, I want a scaled image. I'm willing to switch from an img tag to an inline style="background-image" to get the scaling to work, but either way, I'm having trouble getting the column heights to match.
The closest solution was to use display:table, but I don't like that I can't change which side the image is on without changing the HTML. With my current float based design, I can swap the image placement with just a different class (the left-image above for example).
With just floats, here is an example of what I have so far: http://jsfiddle.net/no80ayc2/2/
You'll notice that when the view is narrow, the image is shorter than the overall container height.
I've read something about using relative/absolute positioning, but the only way I could get that to work was with a fixed height for the container. That won't work for me: http://jsfiddle.net/qLa4g7fL/1/
EDIT: To clarify, I want the image to fill the entire space (33% width by 100% height). And I expect it to get cropped as necessary.
Here is an example of how that should look (just a quick idea)
change min-width: 100% into max-width:100% in .page-section.image-third .image-wrapper img
Then your image-wrapper may not have the full height but will stop your image to overflow.
You need to change your min-width to max-width,
Try to look at this link, I just update your code
http://jsfiddle.net/no80ayc2/7/
There's a new amazing css property called object-fit!
https://css-tricks.com/almanac/properties/o/object-fit/
You'll fall in love!
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
I'd like to set a DIV to 100% of the page width rather than 100% of the window width.
So, if my content is wider than the browser window, I want the DIV to still scale to the full width rather than ending in the middle of the page as it does with width: 100%.
Nesting it into a DIV with width: 200%; overflow: visible; basically works, but has the side effect that you can scroll along all the 200%. And even then, if the content exceeds double the window width, the div will end in mid-air.
Example: http://jsfiddle.net/nm64V/ (please note that the 3000px wide content is just an example, in my project I don't know how wide the content will be and when it will exceed the window width)
How do I achieve the descripted behavior?
I don't believe what you want to do is possible like that. You'll probably need to give a more concrete example of what you want to achieve.
Until then I give one guess that may work: Give the surrounding element (<body> may work, otherwise add one) display: table-cell, since table cells stretch to fit their contents. If you need to support older browsers that don't support display: table-cell, try adding a single celled table around the contents instead.
Example: http://jsfiddle.net/nm64V/2/
From what I understand, you can solve this issue by wrapping all your content in a div set to the size of the content. Using your example:
<div style="margin: 0">
<div style="width: 3000px;">
<div style="width: 100%; border: 1px solid red;"></div>
<div>... Your long content goes here ...</div>
</div>
</div>
Now, whatever width you set the container div to (say, 1500px), both the inner div (with the red border) and your content will be that width, even if it stretches beyond the browser window.
In the case that you don't know what size the container div will be, take out the 'style="width: 3000px;"' line, and it will still work.
Example: http://jsfiddle.net/nm64V/1/
You should probably provide an example of what you're trying to do precisely. As a DIV is a block element, it should always take all the width available, unless it's empty or floated.
Is the "content" you're talking about inside that said DIV or somewhere else in the page?
I have a web page with the following content..
<div id="container">
<div id="header"></div>
<div id="lsidebar">
</div>
<div id="content">
</div>
<div id="rsidebar">
</div>
</div>
i need a container to be centered always on the screen.
the container width would be the half of the screen.i use margin-left for centering the container.But it is different for different browser.
Another problem:i am adding float:left for lbar,content,rbar.but the rbar is moving to next line like this...
Here is my css
#container
{
position:absolute;
width:75%;
left:15%;
}
#header{width:100%;height:430px;}
#content{position:relative;top:0px;width:60%;}
#rsidebar{border:2px solid black;width:100px;height:200px;float:left;}
#footer{position:relative;top:10px;width:100%;}
how to solve this issue...
the container width would be the half of the screen.i use margin-left for centering the container.
Sorry?
If the container is half of the screen, you'll have a width:50%. If you want to center it, you'll have margin:0 auto;.
There are only two appropriate techniques to center items on a page: text-align:center; for content, margin:0 auto; for blocks. You may be tempted to do something like margin-left:25%;width:50%;, but it will probably not give the expected results in all browsers and cause too many problems, so try to stick with the techniques that everybody uses for years, unless you can prove that your technique is much better.
Another problem:i am adding float:left for lbar,content,rbar.but the rbar is moving to next line
Probably the outer width of three panels is bigger than the width of the container. Note that we're talking about the outer width, not the width itself. For example if the container element is 1067 pixels width and contains two panels of 200 pixels and one panel of 600 pixels, with 50 pixels margin between, the actual width of three panels will be 200×2 + 600 = 1000, but the outer width will be 1000 + 50×2 = 1100, i.e. greater than 1067 pixels.
To avoid problems with the widths of the panels, especially in the case where your container has a variable width depending on the size of the window, you can float-left the left panel, float-right the right one and keep the central panel to fill the remaining space. This may not always be possible depending on your layout and design. If this is a case, it would be great to see the actual source code in your question to be able to give a more specific answer.
Seing your source code, I don't understand why are you using position:absolute and position:relative for nearly every element. What's the point?
1. Aligning the container
To align the container, you have to specify not only the width, but also the margins.
div#container{margin:0 auto;width:50%;}
2. Float-lefting the panels
Now that you have your container filling the half of the space and centered, let's position the panels.
Your right panel has a width of 100 pixels. I suppose that your left panel has the same width.
div#lbar,
div#rbar{width:100px;}
Let's float-left and float-right them:
div#lbar,
div#rbar{width:100px;float:left;} /* Apply this style to both side panels */
div#rbar{float:right;} /* Override the float:left of the preceding line */
Now, we want the central panel to avoid filling the space already filled by two other panels:
div#content{margin:0 100px;}
That's pretty all you need to do.
I may also suggest you to read some books about HTML/CSS. Looking at your code, I might suppose that you're not very familiar with it, and that some reading may improve both your understanding of both languages and your skills.
first: give the container a width and
margin-left auto; margin-right:auto;
do you use a meyerweb reset stylesheet?
The combined width of you lbar + content + rbar + margins+ padding is probably more than the space in your container; therefore your rbar moves to the bottom.
ALso use the container solution of Daniel
You can use margin: auto to center container horizontally. About sidebars you probably want lbar, rbar, content in markup and float: left, float: right for lbar and rbar respectively. Remember to put clear: both on footer just in case.
You can also use HTML5 or something like http://lessframework.com to specify conditions for different screen sizes.
I have a page with two divs on it which should fill the entire screen.
Both of them have width = 100%
The upper one's height should be defined by its content (the minimal possible height that fits all content) and never show any scrollbars.
The lower one should fill the rest of the screen. However, if its content does not fit the div, it should display the vertical scrollbar.
Like this:
<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>
How do I do it with CSS?
Update:
I'm looking for a solution that would not require me to set the fixed height for the upper div.
Is that possible?
this should fix your problem
#header{ overflow: hidden }
#content{ overflow-y: auto }
edit: you have to define the height of the divs aswell
In order to do it with CSS you need to define a height on the bottom div, and then add overflow:auto.
.content {
height:90%;
overflow:auto;
}
Unfortunately, this means that your top div will need a height defined as well, because content will have to take up a predefined amount of space on the page. If you use percentages for height, then you will need to define a height for your header div so stretching and shrinking the browser window doesn't cause issues.
The only way I can see you achieving this is through Javascript. I know you didn't tag/ask for JS but I can't think of a straightforward, elegant CSS solution.
With JS you could capture the onpropertychange event of the header div, check to see if the property changed was offsetHeight/clientHeight and adjust the top style property of the content div. The content div would also need to have position:absolute; and bottom:0px;.
Sorry if you're not interested in a JS solution, I just don't think there is a CSS one without accepting a user experience below what you're trying to achieve.
You should define fixed width for second div and use overflow css property to define scrollbars.