Is there a way for my main div to have an initial width of 1024px but be able to expand based on the content if the content is longer that 1024px?
Also, the possible contents are dynamic, so if the content is longer than 1024px, then the main div must expand to accommodate the content. But if the content is smaller than 1024, then it should remain as 1024px centered on the screen.
HTML
<div id="main">
<h1>Title</h1>
<div id="otherContent">
<!-- other content here -->
</div>
</div>
CSS
#main {
width: 1024px;
margin: 0 auto;
}
Here is a fiddle with examples (Examples are based on 600px instead of 1024px)
Edit: The main div is also centered using margin.
#main {
min-width: 1024px;
}
The min-width property is what you're looking for a I believe:
#main {
min-width:1024px;
}
Set the min-width of main div to 1024px
HTML
<div id="main">
<h1>Title</h1>
<div id="otherContent">
<!-- other content here -->
</div>
</div>
CSS
#main {
min-width: 1024px;
}
Related
I have noticed, that many websites (SO included) don't shrink to the whole width of the screen, preferring to render content column either of fixed-width or setting max-width property for it. Merriam-Webster dictionary website is a good example for the latter.
Is it possible to create such a layout using Bootstap? I have managed to limit content column width inside it's col-8-md div, but there is a huge gap between content and right sidebar on big displays now.
Live demo: https://codepen.io/anon/pen/dNprzm
HTML:
<div class="row">
<div class="col-md-8">
<div class="content-block">
CONTENT
</div>
</div>
<div class="col-md-4 right-bar">
RIGHT_BAR
</div>
</div>
CSS:
.content-block {
height: 1000px;
max-width: 1000px;
background-color: lightgreen;
margin-left: auto;
margin-right: auto;
}
.right-bar {
background-color: pink;
width: 400px;
}
If I'm understanding your question correctly, you just want to be sure to have a fixed width for your content but get rid of the space that's happening to the right of it on large screens?
Remove your margin-right: auto;. Once you get to a screen size where it's larger than 1000px, it's trying to "center" your .content-block
How can I have my first div always be full-screen (of the browser not computer), and then supporting divs show underneath.
I want to replicate the layout of this site
http://checklandkindleysides.com
In the simplest form, I just want:
First section to be full height and width of window
Supporting content to be a specific size and not full-screen
Thanks
You need to give the html, body and full height div a height of 100%.
CSS
html,
body {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
.full-height-content {
height: 100%;
overflow-y: auto; /* margin overflow fix */
}
HTML
<div class="full-height-content">
This is your full height content
</div>
<div class="page-content">
<p>This is your standard page content</p>
</div>
Here is a codepen:
http://codepen.io/anon/pen/aNyQJm
I seem to be having some trouble with 100% widths. I have 3 divs, header, content and footer which are relatively positioned. I have set a width of 600px on the header and a width of 100% on the content and footer. However if I resize the browser when I use the horizontal scrollbar the 100% width divs are cut off and don't go all the way across to match the 600px div...how can I fix this?
CSS
#header {
position: relative;
width: 620px;
}
#content, #footer {
position: relative;
width: 100%;
}
HTML
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<div id = "container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
#container {min-width:620px;}
See example: http://jsfiddle.net/calder12/xN2PV/3/
Point to note. min-width is not supported in IE6. I doubt this matters, if it does you'll need a different solution.
Set width to "auto" for #content and #footer. Divs, being block elements, will automatically consume 100% of the available width (sans margin if set) in their immediate parent element.
As such, if #content and #footer are contained within #header or any other explicitly sized element, then they will never be wider than the specified width.
I want to have a full header, while a fixed width of the content in the center of the page. Here's my code:
HTML:
<body>
<div class="header">
<div class="wrap">Header</div>
</div>
<div class="content">
content
</div>
</body>
CSS:
.header{
background:yellow;
}
.wrap, .content{
border:1px solid red;
margin:0 auto;
width:500px;
}
I've used .wrap inside the .header so that the content in the header also has same width as the .content.
Problem:
The layout looks fine, however the problem starts when the width of the browser window gets less than the width of the wrap (ie. 500px). In that case when we scroll the page towards the right side, some part of header background goes missing.
JSFiddle:
Here you can see the jsfiddle (http://jsfiddle.net/QS3nS/1/). You can see the problem if you decrease the browser width so that it the width of output window becomes less than 500px.
Set a min width on the header
.header{
background:yellow;
min-width: 500px;
}
I'm working on a centered layout with 960px of width. Within the wrapper I want a Slideshow, that is 100% of width (the browsers width).
How can I achieve this?
<div id="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
<div class="slider"> //100%
Slider-content
</div>
<div class="text"></div>
</div>
Thank you in advance... :-)
div.slider will already be 100% width, since block-level elements like div already expand horizontally to fill all their parent's space unless otherwise specified. This is going to be true for div.text as well.
If you are asking how to create the 960px centered wrapper, the techniques are pretty standard. Either:
div#wrapper
{
margin: 0 auto; /* horizontal margin set to "auto" pushes <div /> to center
width: 960px;
}
or
div#wrapper
{
left: 50%; /* put left edge at 50% */
margin-left: -480px; /* move left edge back by 480px = half width.
this makes the center of #wrapper match center of page */
position: absolute; /* position: absolute makes the left: 50% line work */
width: 960px;
}
You may want to look at ways of including the slideshow div outside of the wrapper div if the wrapper is to be 960px and the slideshow is 100% of browser width.
Typically, absolute positioning of the slideshow div inside the wrapper div won't affect the dimensions of its container (wrapper) div but you lose some control in centering the contained (slideshow) div.
I would suggest changing #wrapper to .wrapper so that you can reuse your wrapper class later down the page. Then, I recommend the following markup:
<div class="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
</div><!-- end .wrapper -->
<div class="slider"> //100% of browser viewport
Slider-content
</div><!-- end .slider -->
<div class="wrapper"> //960px
<div class="text"></div>
</div><!-- end .wrapper -->
The solution was very simple.
How to make a DIV, that is within a fixed width DIV, to be the width of the browser.
HTML:
<div id="wrapper"> //960px
<div class="slider"></div> //100% of browser width
</div>
CSS:
.slider {
position: absolute;
width: 100%;
left: 0px;
}