I recently used display:table and display:table-cell properties.
It was like this,
<div id="main" style="display:table">
<div id="left-menu" style="display:table-cell">
Some menu links
</div><!-- End left-menu -->
<div id="content" style="display:table-cell">
The actual content
</div><!-- End content -->
</div><!-- End main -->
I used this because the left-menu background color extends to the bottom, I mean its height is equal the content div. So I dont have to use a background img in my main div which I have to do repeat-y.
But the problem is that the menu links are places in the center of left-menu div and not the top, which is required.
I then had to use position:absolute and top:0 to place the menus at the top of the left-menu div. Which doesnt look to be proper.
Have anybody faced this problem?
You can use faux columns to simulate scaling background images for main content and sidebar divs.
Related
I'm trying to have some elements of design positioned absolutely relative to the page's background but not affecting the page layout (scroll and page height must remain dependent only on the page's contents).
Let say, placing two squares square1 and square2, potentially overflowing on the page's width and maybe below the page's contents.
I've played with the following HTML:
<div id="background">
<div id="inner">
<div id="square1">
</div>
<div id="square2">
</div>
</div>
</div>
<main>
<!-- main content goes here, can be arbitrary HTML -->
<canvas height="1000px" width="10" style="background:red;"></canvas>
</main>
Both with attempts at CSS position: absolute of the squares inside a position: relative background div and overflow: hidden on the inner div ; but also playing with only margin-based positioning, I always end up with the "background" overflowing below the main content. Are there alternatives approach to achieve what I'm trying to do ?
To be more explicit, on this JS fiddle https://jsfiddle.net/1ktfyna4/2/ I'm trying to have the page stop scrolling at the bottom of the red line, while still showing the top of the yellow rectange.
I made it simply using display: flex on the outward-most container, with both the content div and background div inside.
See https://jsfiddle.net/m8pk45re/1/
I want to create a fullheight layout with a top navigation bar, middle area and footer. The Top Navigation and Footer should always stay at the top and bottom, respectively. The layout I managed to create looks somewhat like this:
I implemented this with:
<section class="hero is-fullheight">
<div class="hero-head">
<the-navbar></the-navbar>
</div>
<div class="hero-body">
<div class="container">
<dashboard/>
</div>
</div>
<div class="hero-foot">
<tab-navigation></tab-navigation>
</div>
</section>
The problem now is that when I have other elements than the <dashboard/> in the hero-body (like a long list of boxes) the fullheight layout is lost, making the site longer than the display height. How can I make the hero-body div scrollable? I tried adding overflow: auto; but that doesn't work
Apply height or max-height for hero-body and then apply overflow: auto;. May be you can hide overflow-x(overflow-x:hidden) and apply scroll only vertically by overflow-y:auto.
I am facing with a problem that my top menu overlaps the body. When actually menu must be placed above body.
I've already tried display: block; but it didn't help
Can you look trough it please ?
Here my Demo
Okay, try this. Give the menu div
style="display:table;"
and hope it will solve your issue. Before it doesnot assume any space for div itself, but only for the content and the main div occupies the space right from the top.
Here is the fiddle. I have given there inline css. But I suggest to define a class for menu and put the css in there.
Have you created a container div for the entire page? And then have a background div and a separate menu div?
<div id="page_container">
<div id="background"> Background code
<div id="menu">Menu code
</div>
<div id="body_content">Content in body code
</div>
</div>
</div>
I'm working on a site using the Bootstrap 3.0 framework. I'm trying to get a kind of half border effect where there is a different background for the header and left navigation that wraps around the top and left of the page while the main content would have a darker background that extends from the left navigation infinitely to the right. I have the main content wrapped in a container and I know I'm able to extend backgrounds infinitely to the left and right by placing the content div inside of a div or other element and making that element's width 100% but how would I do this with a specific column that is already inside of a row? The main content is in a row that also has the navigation on the left. The site can be found here... http://jacobbuller.com/testsites/derekdavis/index.html
Please let me know if you have any suggestions!
--- EDIT ---
I'm trying to explain this a little clearer.
Here are two images showing what I have now and what I would like...
Basically I have a the header tag at 100% width and then inside of that I have the content wrapped in the container class to make sure it's center on the page. This way I can make the top header have a different background then the rest of the image. The rest of the page is made up of two columns wrapped in a container div. The problem I am having is making the background for the main col on the right expand 100% to the right. Here is what I would like it to look like...
I want the background of the main content col to extend 100% to the right to give the impression that it's being framed by the top header and left navigation.
Here is a short version of the header...
<header>
<div class="container">
<div class="row">
</div><!--End row -->
</div><!--End container -->
</header>
And the main content...
<div class="container">
<div class="equalHeights-sidenav"><!--equal heights JQuery so left nav is same width as main content -->
<div class="row">
<div class="sidebar-offcanvas col-xs-12 col-sm-3 col-md-3 col-lg-3">
</div><!-- End col -->
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 content">
<div class="row"><!-- start main content row -->
</div>
</div>
There are more rows and col in the main content div but these are the two main divs surrounded it. Let me know what you think the best course of action is... if it's possible at all that is.
I'm having an issue with an expanding div tag that is nested within another div tag. In IE the expanding div tag expands outside the outer div tag when needed. However, in Chrome, when the inner div tag expands, it causes the outer div tag to get scroll bars. I would like the behavior to be the same as in IE - no scroll bars appear and the content overlaps the body content of the page (after all it is just the shopping cart widget).
Here is the code in my html page.
<div id="mastheadcontainer"><!-- Begin mastheadontainer -->
<div id="masthead"><!-- Begin Masthead -->
<div id="mastheadcontent">
<div id="googlecart-widget" style="float:right;"></div>
</div>
</div><!-- End Masthead -->
Here is my CSS:
#mastheadcontainer {
width: 100%;
margin: 0 auto;
background-color: #dcb;
border-bottom:10px solid #0066CC;
/*margin-bottom:20px;*/}
#masthead {
text-align: right;
width: 960px;
margin: 0 auto;
overflow: auto;}
#mastheadcontent{
width:956px;
height:122px;
margin:0 auto;
/*background-image:url('../images/bk-masthead.jpg');*/
/*background-repeat:no-repeat;*/
background-color:#dcb;}
Any recommendations so that the inner div tag expands similar to the behavior in IE when viewed in chrome?
Thanks
Mike
I assume your are talking about vertical scrolling and that the content inside your #mastheadcontent id is making a scroll bar appear when it exceeds 122 pixels.
I am not sure exactly what you want the end result will look like but here is what I suggest depending on what you are looking for:
Remove the height of the container so that the div will expand to fit the content inside of it. Note that since you are using a floated inside the container you will have to clear the container using a number of methods, one of them is using the property "overflow: auto;" on the #mastheadcontent. If you are not familiar with clearing floats I suggest you look at the multitude of guides on the web to help you understand the concept.
Or you want the content to expand past the boundaries but not expand the container itself, in that case you might want to use the property "overflow: visible;".
In any case you might want to play with the overflow property to get a solution to your problem, there is plenty of information on the web that should clear things up for you.
Hope this helps.
I answered my own question. Here is the current div structure of my site:
<div id="main>
<div id="mastheadcontainer"><!-- Begin mastheadontainer -->
<div id="masthead"><!-- Begin Masthead -->
<div id="mastheadcontent">
<div id="googlecart-widget" style="float:right;"></div>
</div>
</div><!-- End Masthead -->
<div id="bodydiv">
</div><!-- End bodydiv -->
</div><!-- End main -->
To get the googlecart-widget to expand over the top of the content in the bodydiv element in Chrome, I had to add overflow:visible to all div elements in the mastheadcontainer and to the mastheadcontainer element. My new HTML div structure looks like this:
<div id="main>
<div id="mastheadcontainer" style="overflow:visible;"><!-- Begin mastheadontainer -->
<div id="masthead" style="overflow:visible;"><!-- Begin Masthead -->
<div id="mastheadcontent" style="overflow:visible;">
<div id="googlecart-widget" style="float:right; overflow:visible;"></div>
</div>
</div><!-- End Masthead -->
<div id="bodydiv">
</div><!-- End bodydiv -->
</div><!-- End main -->
This might be a bit of overkill setting the overflow property for all elements, but it worked.