Fluid layout with margin-bottom and nested div 100% height issues - html

I'm in the process of transforming an existing fixed layout to be "fluid".
I've got 2 issues:
When #content contains a lot of data, which makes it expand over the viewport I can't find a way to have a margin at the bottom.
The #content seems to "loose" it's height when position:relative; is added, which is necessary to place #content on to of #topgradient. I need #test (blue border) to fill #content and #content needs to fill #contentwrapper.
I've got an existing fixed layout which works great, the issues began after I added/changed height: auto; min-height: 100%; on the divs.
See this sort of messy/prototyping jsfiddle: http://jsfiddle.net/bQeu3/2/ (click in the white area (#content) to change content)
The optimal solution on issue 1 would look like:
The optimal solution on issue 2 would look like:
Hope you can help?

for the first question:
http://jsfiddle.net/bQeu3/7/
remove height:100% from #page
add padding:1px to #page
add margin-bottom:100px to #contentwrapper
to keep the size of #contentwrapper when you clicked something:
#test{
min-height: 300px;
border: 5px solid blue;
margin: 5px;
}
you might need to correct the 300px considering borders and such...

Related

Centering responsive header - wordpress blog

I've tried several methods but can't seem to get each part of this accomplished. I've made a wordpress blog for someone and she was happy with it but recently wanted the header changed. I had it wide and she wanted it boxed/centered. The header contains logo, nav and two images on the left that the client wanted placed there for looks, basically. The blog is responsive and once the screen gets to a certain point, the header matches the container of the rest of the page. But on fullscreen laptop/desktop, it still starts out much wider with just a bit of padding on each side. When I pad it to the right width, then it gets to small when the screen changes. I want it to be the same width of the main slider and container at all times.
The blog is at http://www.allloveblog.com
The CSS I have for the header currently:
.fusion-header{
position:relative;
display:block;
/*width:100%;*/
/*padding-left:162px;
padding-right:160px;*/
padding-top:0px;
padding-bottom:0px;
}
.fusion-header-wrapper{
position:relative;
display:block;
width:100%;
float:center;
}
If you change your browser window you can see where the change takes place and it becomes stick as soon as it's the width of the other containers, I just need it to start at the width of the container.
Any help is much appreciated.
I think all you have to do is this:
.fusion-header-wrapper {
max-width: 1160px;
margin: 0 auto;
}
In case you need to overwrite some CSS rules just add body before the class. This way your rule will be prioritized and you can easily identify your rules. Like this:
body .fusion-header-wrapper {
max-width: 1160px;
margin: 0 auto;
}
EXPLANATION
Basically what you needed to do is set a width limit to the header matching the main's width limit max-width: 1160px; and obviously center the header with margin: 0 auto;
#main has 30px padding left and right.
Inside #main we have .fusion-row with max-width: 1100px;
Inside .fusion-header-wrapper we have .fusion-header with 30px padding left and right.
So if you set max-width: 1100px;you will notice that you need to add 60 more px because of the paddings on other divs.
P.S. Make sure you create a Child Theme for editing the existing WP Theme.

Collapsible CSS left-hand column and auto-expanding right-hand column... expanding vertically?

I have a tricky design to put into practice. There will be two CSS columns, the left of which is a left-hand menu (~300px) which collapses to 85px when not in use. The right column should expand to fill whatever space is available when the menu collapses.
This in itself is not too tricky and I've achieved it using the overflow: hidden trick (essentially the same as the accepted answer on CSS layout with 2 columns, taking up all width of browser, where left column can collapse)
However I am now looking at how I can have both columns expand vertically to fill the available screen space.
The variable width left-hand column seems to prevent me from using the Faux Columns technique. I'm not sure other than that.
I also have CSS transitions on the width so that the collapse/expand movement is more fluid, which I'd like to maintain.
Any advice would be gratefully received.
EDIT: This is as close as I can get: http://jsfiddle.net/tsr5a/:
html, body { height:100%;}
#menu { width: 100%; height: 50px; }
#container { overflow: hidden; height:100%; }
#left-column { background:yellow; float:left; height:100%; width:300px; }
#right-column { background:red; height:100%;}
#container .shrink { width:85px; }
I'm not sure why the right-hand column is offset vertically by 1 line. Also note that while I can set 100% height on the columns, this doesn't take into account the fixed height toolbar at the top of the page.
Good Luck
you need include this
#container{display:inline-flex;width:100%; }
#right-column{;width:100%}
JSFiddle
If you remove overflow: hidden; from your #container it should work as desired.
JSFiddle
#container {height:100%;}
Edit: I hope I understood your question/issue correctly.

Centering a fluid absolutely positioned section

So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen

Div within a Div

I've got this problem, I've placed a div within a div, I've positioned the "title" to be height 50, and then "navbar" below it, so I've put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.
I would love "site" to hog the walls and then all the other div fit in that div.
<div id="site">
<div id="title">TitleBar</div>
<div id="navbar">NavBar</div>
<div id="frame">FrameBar</div>
</div>
body{
margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}
I've found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png
that's because 100% height actually means "use the same height as the container".
But I didn't quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.
But I think you're going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I've created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/
This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/
Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9
You can make divisions in HTML appear side by side to each other by adding a float property to the css.
#navbar{
border: 1px solid #c38a8a;
width: 200px;
height: 100%;
float: left;
}
Additionally, always add the 'px' unit after a size. Modern browsers assume you mean px, but older ones might not.
There isn't a good way to prevent the overlapping when you have a sidebar that is a set pixel width. To achieve the liquid width (or fluid width) style, you would have to add negative 200px margin on the left to the #frame (to counter sidebar). Then, add another divsion inside the #frame to do the styling for that portion. This is how I have achieved the look on my web site, and it's also the solution used in the previous default Drupal theme (Garland).
#frame{
margin-left: -200px;
}
IN this context, 100% for the Navbar doesn't mean the remaining height but 100% of the visible heigth of the parent; so if the parent has a height of 400px then Navbar will also have an height of 400px. If you add to this size the height of the title bar, you get a total value greater than the size of the parent; therefore the appearance of the scolling bar.
While there is usually no problem with the width to make it appears to fill the whole length of a screen, it's very difficult in HTML & CSS to do the same with the height as they have not been designed for this sort of thing; especially with an imbricated structure (div inside div).
Some people will use Javascript to get the size of the screen (browser) and compute the size of their objects accordingly but I don't know if you can do the same with a pure HTML/CSS solution; especially if you want to have your solution compatible accross many browsers.
For more info, take a look at http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Force whitespace to appear between fixed-width div and the right side of page

I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.