So I have two divs. One left div with navigation links and one right div that populates with content depending on what link you click on the left. I would like to have a vertical gray line between the navigation and the content separating the two, but I need it to change in height depending on how long the right side content div is. (And also if the right side isn't as long as the navigation, have the line go to the bottom of the nav by default).
So if the user clicks on a link that makes the right content div really long, I need the vertical line to change its height dynamically and go all the way down, but if the content isn't as long as the nav i still need it to go all the way down to the end of the nav.
I was trying things with borders and height:100% but I couldn't get anything to work cross-browser. (IE and FF) Thanks!
Assuming your left nav div has a fixed height, or a height that doesn't change often. Let's suppose your left nav div has a height of 400px. Then:
div.leftnav {
height: 400px;
float: left;
}
div.rightContent {
min-height: 400px;
border-left: 1px solid gray;
float:left;
}
Keep in mind, "min-height" is not supported by IE6.
A repeating background image for the parent div with a vertical grey line positioned appropriately would be your best bet.
You could let the navigation div have a border on the right, and the content div have a border on the left. Letting those two borders overlap should give the desired effect.
i once solved this by using a background image repated on the y axis. Just create it as wide as your page and not very tall, maybe 10-20 pixels. and then just repeat it downwards. Kind of cheating maybe, but it works in some cases :p
One example of how I did it you can see on this website.
The way I do this is to put the elements into a container div with overflow hidden. You then apply a left border to all repeating div's. Then, on all floating child elements you set the css properties: padding-bottom:2000px; margin-bottom-2000px;
Example:
CSS
div.vert-line{overflow:hidden}
div.vert-line>div+div{border-left:#color;}
div.vert-line>div{width:200px; float:left; padding-bottom:2000px; margin-bottom:-2000px;}
HTML
<div class="vert-line>
<div>Left Side</div>
<div>Right Side</div>
</div>
Hope this helps!
The answer to this question might help you:
Extending sidebar down page
you can use the css border-left on the right div.
.vertical_line { border-left: 1px solid #f2f2f2; }
<div>
<p>first div</p>
</div>
<div class="vertical_line">
<p>second div</p>
</div>
Related
I have a big div which includes two divs. These smaller divs have to be in the same row, so I do it with "display:inline-block". But when the second div's text goes longer, that div goes to one row down. So, what I want to do is, making the second div some kind of fluid so it stays at the same row, and then rest of it goes down.
Here I have an example picture from Paint:
I'm looking for a solution with CSS or jQuery which I can handle easily.
Hope I could explain, thank you.
Give your #text div a style of float: left; and place it before the #secondText div in the source order. This will force your #secondText content to wrap around #text.
<div id="text">Text</div>
<div id="secondText">Another text continues here</div>
And the CSS:
#text { float: left; }
You can simply apply display:inline for both the inner divs as in this JSFiddle
I want to know how this theme gets the effect of the items in the lower right disappearing as the screen gets smaller.
http://themeforest.net/item/jr-photography-wordpress-theme/full_screen_preview/1163891?ref=takeaction
I have items in the lower right but when the screen is too small They move down instead of disappearing like this. Any comments or links how to get this effect would be great! Thank you.
Not media but rather CSS floating solution
I haven't checked source code of the particular site, you're linking, but I've created a simple CSS solution that hides right-hand side elements when there's no more space for them because of the left hand side elements.
Here is a JSFiddle. Resize the window width (or drag the columns in to resize content quadrant width) so the two elements become too wide for the container width. The right-content will automatically disappear.
What it does?
You have footer container with two additional containers, floated left and right. All three of them must define the same height while:
footer defines overflow: hidden so anything that goes beyond lower visible viewport will not be displayed.
other two are then just floated within to left and right
Floating then makes care of everything. When there's not enough space to accommodate floated elements by with they start to render underneath where there's enough space. But displaying underneath hides them because container element has a limited height.
<div class="footer container">
<div class="left container">left content</div>
<div class="right container">right content</div>
</div>
And simple CSS (including just relevant settings):
.container {
height: 2em; /* all containers have the same height */
}
.footer {
overflow: hidden;
}
.left {
float:left;
}
.right {
float: right;
}
I'll try to explain this as best as I can ;)
Basically, I have a sidebar <div id="sidebar"></div> which is floated to the leftside and has fixed position. I planned to have another div just after it that will contain the content, but the problem is that, because sidebar has fixed position the div that I expect to be after it (to the right side) is appearing behind sidebar. This is an issue, because I need to use margin-left: 310px (310px is a width of sidebar) to make another div appear after the sidebar, so instead of occupying 100% width left on the page without a sidebar's 310px it occupies full page and causes align problems.
It's hard to explain, but if you visit my page http://freshbeer.lv/development/en/ you can see white div, it has margin-left: 310px; and width: 100%; inside it there is a grey div with width:700px; and margin: 0 auto;. I expect grey div to be aligned in the middle between 2 images at the background, but as white div is occupying more space than needed it doesn't happen. Could anyone suggest a solution please?
Maybe I am misunderstanding your question, but in #container you can either remove width: 100% or change it to width: auto.
The problem is that it is getting the width of the parent container (which if you go far enough back is taking the width of your browser window) and then adding the margin. So it is 100% + 310px. Hence the reason it is 310px wider than your browser window.
Try this. First, make sure that your side bar is first in your script. Then, do not set the width of your main section. Instead, just say display:block. So something like this:
<html>
<body>
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div>
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div>
</body>
</html>
In the above example, the top div is your side bar, and the second your main body section. I just added the heights so I could see the columns during testing.
I have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column.
What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div.
When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)
You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:
#contentholder {
overflow: auto;
}
Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:
<div style="clear:both"></div>
I want to make an HTML, CSS page where the layout is as:
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.....
</div>
</div>
The content div has a background image which should be repeated in y-direction. Also the left and right div should be side by side over the same background image.I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed. Please help me folks.
Thanks in Advance :)
without seeing your code... my guess is you're floating the left and right DIVs... but you're not floating the content DIV...
your CSS should look similar to this to make it work:
#content {
float:left;
background-image:url('whatever.png');
background-repeat:repeat-y;
}
#left {
float:left;
}
#right {
float:left;
}
I am able to accomplish it but by
keeping the height of the content
fixed but I don't want to make the
content's height fixed.
If you are able to repeat the background image in the Y direction then it shouldn't matter how heigh the #content div is, as your background will just fill the remaining space - correct?
If your content div is not expanding to the height of the child div's then clearly #content must be outside of the normal flow of the page, in which case you should float it and not set a height for the container div.
It's quite hard to understand what you're trying to do, but I think what you want to do is add overflow: auto to your content div, so that it becomes the same height as the left and right divs:
#content {
overflow: auto;
background: [bg code]
}
#left, #right {
float: left;
}