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.
Related
I've really hit the wall on this one and need some help. I'm trying to create a two column layout with both widths and heights adjusted to the contents of the left column. It seems to be a rather basic layout, but I'm starting to think it can't be done (without resorting to JS).
This fiddle describes what I'm trying to do. It's a container DIV with two DIVs inside, aligned horizontally. The left inner DIV should adjust its size (both width and height) to its content. The right inner DIV (which contains a Google Map) should have the same height as the left one while filling up the remaining width of the container.
<div id="container">
<div id="left">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div id="right">
Google Map here.
</div>
</div>
I've tried everything I know and all tricks I've found, but no success!
#container {
background-color: #EEE;
overflow: hidden;
}
#container div {
border: 1px solid black;
padding: 5px;
}
#left {
background-color: lightblue;
display: inline-block;
float: left;
}
#right {
background-color: lightgreen;
height: 100%; /* THIS IS WHAT I WANT, BUT IT WON'T WORK, OF COURSE */
overflow: hidden;
}
I've found many similar questions, but in all those cases the left DIV/column had a fixed width, which makes it a whole lot easier.
Any input is much appreciated, especially if it works in IE9+ (and modern browsers)!
Edit
Some clarification. The purpose of the right column is to hold a Google map and consequently the map is supposed to fill up the entire DIV. Try setting a fixed height (e.g. 100px) for #right in the fiddle that I link to above and you will see the map showing up.
jsfiddle demo
css :
.container {
overflow: hidden;
background-color: #EEE;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
p {
padding: 10px;
margin-top: 10px;
width: 50%;
}
html
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="container">
<div class="column">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div class="column">
<div id="map"></div>
</div>
</div>
<p>
The right DIV (which contains a Google Map)
should be the same height as the left DIV,
while filling up the remaining width.
</p>
<p>How to do that?</p>
Here what I came up with -> link
When you remove the overflow property of your #right div it stretches as expected. However in this case you won't be able to hide the overflowed content.
CSS
#right {
background-color: lightgreen;
height: 100%; /* THIS WON'T WORK */ // height works as expected
}
I'm making a responsive web design. But my CSS knowledge could have been better. I want a padding on a div, but I don't want it to affect the title.
See this example:
I want the title to be were it is, but the little squares to have a margin at the left side.
I've tried to set a padding and then reset the title position with relative positioning. But I don't like that solution because the title is pushing the squares more than necessary.
I've also tried to set a div where the cross is, but I can't manage to get it under the title and on the left side of all squares since the title is floated left and the squares right.
Here is a fiddle
HTML
<div id="siteContainer">
<div id="titleContainer">
<h1 id="title">This is the long title</h1>
</div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
// more...
</div>
CSS
#siteContainer {
max-width: 800px;
margin: auto;
}
#title {
display: inline-block;
}
#titleContainer {
height: 100px;
margin: 10px;
float: left;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
background: #DDCCAA;
float: right;
}
Whatever you want the padding on the left of the container to be (100px), you can set as a negative text-indent value on the title (-100px).
Did you think about the box model? Do some research on CSS box model and you will see where your problem is.
Let me give you an example:
If you have a div with the width of 100px and add a padding of 10px, the width of your div will be 120px, both sides will take 10px from the padding, you can solve this in two ways, one is to make the div width smaller "80px" and the second is to use box-sizing: border-box;
Hope this helped.
In this case,I had created a static footer and the element inside the div like button(which alway at the bottom),I had managed to make the height of the div bigger but found that is no efficient to used while the element inside the div was increased and expended.Is it some suggestion else to make it dynamically?thanks.
The sample output might look like this:
When you say static, do you mean a fixed position at the bottom of the window? If so then whatever your height, e.g. 20px, make that the value of the bottom-padding for the main area, then anything in the main area will be padded equally by the height of the footer and will be seen.
Here is a working model for you on JSFiddle.
In HTML, there are 2 divs, "wrapper" and "footer", like:
<div id="wrapper">
line 1 <br />
</div>
<div id="footer">
footer text
</div>
In CSS:
html, body {
height: 95%;
}
#wrapper {
min-height: 100%;
margin-bottom: -1.5em;
padding-bottom: 1em;
}
#footer {
position: absolute; !important
bottom: 0;
}
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;
<div id="site_wrapper">
<div id="top"><?=$top?></div>
<div id="wrapper">
<div id="login_wrapper">
<?=$content?>
</div>
</div>
<div id="footer"><?=$footer?></div>
</div>
Where
$top should be drawn on the very top of the page.
$content should be centered both vertically and horizontally of the page.
$footer should be drawn on the very bottom of the page.
I do not want either of the divs to follow the view, I found two solutions for the problems one by one, but none to combine them, seeing as they both had the height element in css. So first I guess if it even is possible (which I guess it is) second is then of course, how?
Edit: Pretty much like this side, the top bar should always be on the top, that one is fairly straight forward.
Then the #login_wrapper should always be centered in the site with a fixed height.
Last the footer should always be on the bottom (it should be pushed not stickied), because in this case #login_wrapper wont fill out the site.
The #top and #footer both have fixed heights as well.
Edit2: Fixed some clarifications for the problem.
Found solution from this site [link]http://stackoverflow.com/questions/7909587/horizontal-and-vertical-centering-above-a-sticky-footer-in-css
Thanks anyway!
If i understand your question, try with this css
#site_wrapper
{
position: relative;
}
#top
{
position: relative;
top: 0px;
}
#footer
{
position: relative;
bottom: 0px;
}
#wrapper
{
position:relative;
vertical-align: middle;
height: 100%;
}
#login_wrapper
{
/* add some height */
}