I am trying to make content div show a horzontial scroll bar once the page becomes too narrow for the content inside of the content div. Currently, my setup is as follows:
HTML:
<div id="LeftNavigation">
<div id="TopNav">Menu1</div>
<div id="BottomNav">Menu2</div>
</div>
<div id="ContentContainer">
<div style="float: left; width: 500px">Content1</div>
<div style="float: left;">Content2</div>
<div>
CSS:
#LeftNavigation {
float: left;
}
#TopNav,
#BottomNav {
width: 165px;
}
#ContentContainer {
margin-left: 180px;
min-height: 150px;
padding: 10px;
}
I'd like to have my page work like the image below. Where my content container has a minimum width of say...600 pixels and then when the page width gets below the combined width of the menu and content(including margins), a scroll bar shows up. I can't figure out how to get this to work properly, though. My ContentContainer div keeps wrapping below my LeftNavigation div whenever the page becomes too narrow. Thanks in advance.
You need to add a size to ContentContainer and add overflow-x:auto. The scroll bar will show up on ContentContainer, not the entire page as you illustrate.
If you want it where shown in the diagram you'll need to make a fake scrollbar and use JavaScript to make it work.
Related
I want my background to be full screen with 100vh but i also want it that if I minimize the screen vertically that the background stays at the end of the picture that is on the background
header{background: #efe0d9; display: inline-block;width: 100%; float: left; height:100vh;padding: 1% 0 0;}
I want to have a background that ends at the bottom of the screen becase then the picture that is on the screen is big enough but when I minimize the screen vertically the pictures stay the same size (as wanted) but the background also goes up so the pictures are overlapping with next part of the websiteenter image description here
Have you tried setting min-height?
Edit: This may not be exactly what you're looking for, since I had to add an extra element, But you could try wrapping the <header> in a container with its height set to 100vh, making the header's contents take up the minimum height you want to cover, and giving the same background color to the wrapper and the header.
Check the snippet and toggle to full screen to see the background expand beyond the header's contents.
#container {
background: #efe0d9;
height: 100vh;
}
header {
background: #efe0d9;
width: 100%;
}
.stack {
height: 100px;
text-align: center;
}
body, p, hr {
margin: 0;
}
<div id="container">
<header>
<div class="stack"><hr><p>0px</p></div>
<div class="stack"><hr><p>100px</p></div>
<div class="stack"><hr><p>200px</p></div>
<div class="stack"><hr><p>300px</p></div>
<div class="stack"><hr><p>400px</p></div>
<div class="stack"><hr><p>500px</p></div>
</header>
</div>
Edit: Adding a container div with its height set to 100vh and display set to flex, and giving the header a min-height seems to have done the trick. Here's an updated fiddle.
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
I'm a complete html/css newbie and I'm making my first site. I want it to look something like this:
http://www.dorishochscheid.nl/
I used a div element to "contain" the navigation bar and the main content, like this:
<div id = "container">
<nav> ... working navigation bar here ... </nav>
<section id = "content"> ... main content here ... </section>
</div>
This is my css:
body {
background-image: url(images/achtergrond.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin: 0;
}
#container {
margin: 0 auto 0;
margin-bottom: 200px;
width: 800px;
height: 1000px;
background-color: #de59b2;
opacity:0.85;
/* voor slechte browsers */
filter: alpha(opacity=85);
}
#content {
float: left;
background-color: #de59b2;
margin: 15px 45px;
}
The navigation bar, the content section and the container all have the same opaque background color.
The problem is this: I want the container div to grow in height according to how much content is placed in the content section. But if I remove the height = 1000px; the whole container disappears from sight. Seperate colored boxes for the navigation bar and main section remain.
Why does this happen?? I've seen things like height = 100%; being used, but that doesn't work here either. I can imagine such a statement being what I'm looking for, seeing how I want the container to grow with the content section.
Why does this happen and how do I get the container to size up or down depending on the amount of content in the content section that it contains?
Or is this totally the wrong way to go about this type of contruction?
This is because the content floats. That keeps the container from adjusting to fit the content. Simply add this to your container:
overflow:hidden;
So. My code is something along the lines of
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that.
and also: I recommend you to separate your styling from your markup.
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
add this to your CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
Working Fiddle
Tested on: IE10, IE9, IE8, FF, Chrome.
didn't use absolute positioning
didn't use Script (Pure CSS solution)
fluid layout
cross-browser
Explanation:
with pseudo element, I'm creating a floating element (without content or width, so he's invisible)
that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
I have the following HTML and CSS:
<div class="content">
<div class="leftbg"></div>
<div class="innercontent"><p>Some content goes here</p></div>
<div class="rightbg"></div>
</div>
.content {
overflow: hidden;
}
.leftbg {
background: url("./leftbg.png") repeat-y scroll top left transparent;
margin-left: 0;
float: left;
width: 10px;
}
.innercontent {
width: 600px;
float: left;
margin-left: 0;
}
.rightbg { /* similar to left bg except for the right side */ }
The problem that I am having is the leftbg image is only repeating until it reaches the height of the paragraph in the innercontent div. I am accessing a database to grab the content for the innercontent div and hence the content will be of variable height. Is there any way to make it so that it repeats until it reaches the bottom of the leftbg (and rightbg) div? What I mean by that is for it to repeat until it is at the bottom of the innercontent div without setting the height as static (e.g. height: 200px;) because the height will be variable.
This equal height column layout tutorial from smashing magazine might help you. With lot of explanation of all the whys.
I think the problem you are facing is that leftbg and rightbg don't have any content. The height of the <div class="content"> element equals the height of it's "tallest" child (innercontent in this case).
Maybe if you post a mockup of what you want as a final result I can help you further. Also, the markup would be helpful.