I have a pretty standard css layout where I use a container div that is 980px wide to hold everything. The only problem is that I want to have a 1900px wide banner half way down the page that is centered in the middle and is 100% width of the page. Is there any way to do this without getting rid of the container div?
so I am wanting
____________________
| | | |
| | | |
| | | |
|___| |___|
| |
| |
|___ ___|
| | | |
| | | |
| | | |
| | | |
|___|___________|___|
< 980px > container
< 100% page width >
Anyone know how to get that 1900px banner centered in the middle without deleting my container div?
THANKS!!
I didn't do 1900px for the sake of the demo, but i'm sure you'll get the idea :)
Demo
Cliff notes:
HTML:
remove containerWrapper if you want the whole banner visible (make scroll bars)
<div id="containerWrapper">
<div id="container">
<p>content</p>
<div id="banner">
someday i'll grow up to be 1900 px wide!
</div>
<p>content</p>
</div>
</div>
CSS:
#containerWrapper {
width:100%;
overflow:hidden;
}
#container {
width:300px;
margin-left:auto;
margin-right:auto;
}
#banner {
margin-left:-200px; /* (this width - #container) / 2 */
width:700px;
}
Related
I'm trying to make two-column full-height layout with bootstrap 4. What I want to do is:
+-------------------------------------------------+
| Logo Header Another Logo| - height 10 %
+----------------------------------+--------------+ -
| | Content 2 | - height 10 % |
| |--------------| |
| | | |
| | width | |
| Content 1 - width 70% | 30% | - height 60% | - height total 90%
| | Content 3 | |
| | | |
| +--------------+ |
| | Content 4 | - height 20% |
+----------------------------------+--------------+ -
All the contents should be visible in screen without scrolling. I want to squeeze or extent the widths and heights according to resolution. That means i strictly want to avoid scrolling.
Note: this design is only for desktop view i.e. width > 768 px. So no need to think about mobile view.
That's all you need from Bootstrap 4 classes in this case
html, body, .project {height: 100%}
* {box-sizing: border-box}
.project div {border:1px solid #eee}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="project text-center">
<div class="d-flex justify-content-between" style="height: 10%">
<div>logo</div>
<div>Header</div>
<div>Another logo</div>
</div>
<div class="d-flex" style="height:90%">
<div class="mb-auto mt-auto" style="min-width:70%;">Content 1 - width 70% - Always center at horizontal and vertical</div>
<div class="d-flex flex-column" style="min-width:30%;">
<div class="mb-auto" style="height:10%">Content 2 - height 10%</div>
<div style="height:60%">Content 3 - width 30% - height 60%</div>
<div class="mt-auto" style="height:20%">Content 4 - height 20%</div>
</div>
</div>
</div>
I have a Bootstrap 3 layout with the following structure:
<div class="row row-full">
<div class="col col-lg-6 col-md-12">
<div class="row row-middle">
<h1>Some Title</h1>
<h3>SubTitle</h3>
</div>
<div class="row row-bottom">
<h1>Some Title</h1>
<h3>SubTitle</h3>
</div>
</div>
</div>
And this is my customization with the CSS:
.row-full{
height:100%;
}
.row-full .col{
height:100%;
}
.row-bottom, .row-middle{
height:50%;
}
And I end up with the following layout from a large screen:
--------------------------------------
| Title | |
| SubTitle | |
| | |
--------------------------------------
| Title | |
| SubTitle | |
| | |
--------------------------------------
So in my layout the main row takes 100% of the screen and same applies for the column. Each sub-row, takes 50% of the height but I need also to be able to set the vertical alignment inside the column because it is a responsive layout.
I tried with FlexBox but it mess up my grid system.
What is the correct way by using Bootstrap 3.0?
What I need is the ability to vertical align the content inside the rows.
In a Wordpress theme, the posts content is justified to the center of the parent layer. The problem is that I don't know how to justify it to the left. Here is an example of the relevant HTML:
<div id="content" role="main">
<div id="post-329" class="post-329 news type-news status-publish hentry category-house category-techno has-post-thumbnail">
<div class="notice-content">...</div>
</div>
</div>
and this is what I can see with Firebug:
| layer | ====> | calculated property |
| #content | => | margin-left: 121px | & | padding-left: 0 |
| #post-329 | => | margin-left: 0 | & | padding-left: 0 |
| .notice-content | => | margin-left: 0 | & | padding-left: 0 |
and no text-align property. But every post content is centered.
¿What can be doing the posts to be justified to the center and how to avoid it?
Edit:
Finally found out the issue. The hentry class had margin: 0 auto;. This causes the content to be centered. What I still don't understand is why Firebug indicate the margin-left as 0px, when actually it is auto and not zero.
+-------------+ +---------------------------------+
| | | |
| 1 | | |
| left-nav | | |
| | | |
+-------------+ | 3 |
| | | |
| | | |
| 2 | | very long contents here |
| | | which causes to scroll |
| other | | vertical bar. Setting |
| remaining | | this content to 100% height? |
+-------------+ +---------------------------------+
What is height: 100%; actually? Is it applied to a page window or till the scroll ends?
I have following html...
<div id="wrapper">
<div id="left-nav">
<!--contents of 1-->
</div>
<div id="yourad">
<!--contents of 2--->
</div>
<div id="main-contents">
<!--contents of 3-->
</div>
</div>
My css is as follows....
#wrapper{position: relative; width: 1007px; margin: 0 auto;}
#left-nav{width: 329px; height: 100%; background: grey;float: left;}
#yourad{height: 100%; background: blue;}
#main-contents{margin-left: 329px; padding: 10px; background: pink;}
****Note: ****
First see my demo to understand my problem Here
Contents of 1 actual height: I don't know.
Contents of 2 actual height: I dont't know.
Contents of 3 actual height: I don't know.
Because I may need for some pages less contents and some pages more contents.
I've tried by using height: 100%; in html, body, wrapper, left-nav, yourad, but could not success.
Height 100%, when applied to a child element, will make the element stretch to the full height of its parent.
For instance, if you set your #wrapper {height:600px} and your #content{height:100%} the content div will now have a height of 600px.
The confusion comes in because the default overflow property is: overflow:visible - will not be clipped by contrainsts of containing element. So without explicitly setting an overflow of hidden or scroll, the content will flow outside of the container.
You can see this being demonstrated in your example (http://jsfiddle.net/RrmK3/) by setting a background color on the parent div.
<div id="wrapper" class="wrap">
<div id="left-nav">
<h4>Menu Title</h4>
<ul>
<li>Menu Item</li>
</ul>
<div id="yourad">
You add is in your sidebar. It is not in your question :)
</div>
</div>
<div id="contents">
<h1>Indenting Code Keeps you Sane.</h1>
</div>
</div>
#contents{ margin-left: 330px; margin-top: 5px; height:100%; }
#wrapper{position: relative; width: 1007px; margin: 0 auto; height:200px; background:pink;}
Ok, this is really hard to explain in writing but I'll give it a shot.
When you set your body to 100%, it will always stay at the height that it started at, so it will cut off anything below the visible body.
The problem here is that one of your columns has to be a fixed height so your wrapper can know how to translate percents. Since you wont know what the height of left-nav is, you can cheat and use javascript to set the height of your wrapper to the height of your left-nav and the content text will overflow correctly..
Enough with the words, here's how you do it:
$('#wrapper').height($('#left-nav').height());
http://jsfiddle.net/Y7PhV/106/
I have a problem that I thought was pretty simple but that is taking me a lot of time to solve it. If there is a simple solution (and I don't know CSS enough), please point me there and I'll close this question immediately.
My problem is the following.
I have 6 divs one on top of another, something like:
<div id="header">header content</div>
<div id="sidebar1">sidebar1 content</div>
<div id="maincontent">maincontent content</div>
<div id="maincontent2">maincontent2 content</div>
<div id="sidebar2">sidebar2 content</div>
<div id="footer">footer content</div>
What I want to have is something like:
-----------------------------------------------------------
| header content |
-----------------------------------------------------------
-------------------------------------- -------------------
| maincontent content | | sidebar1 content|
| | -------------------
| | -------------------
| | | sidebar2 content|
| | -------------------
--------------------------------------
--------------------------------------
| maincontent2content |
| |
| |
| |
| |
--------------------------------------
-----------------------------------------------------------
| footer content |
-----------------------------------------------------------
In other words, is there a way to create a right column even if the divs are not one after another using only CSS and without moving the divs in the code?
I tried to use for sidebar1 the following css
position:absolute;
top:3em;
right:0;
and for sidebar2 the following css
position:absolute;
top:9.5em;
right:0;
but I have the impression that this is not the right way to do it.
A simple way could be to define the top attribute size as a function of the height of heather, but I couldn't find any way to do it only with CSS.
Thanks!
Well... as a direct answer to your question, you can use a combination of floats and % widths to accomplish this. You can also use fixed widths, but you'll have to determine what those sizes are. Here's a simple implementation:
Demo
CSS
#maincontent
{
float:left;
width:70%;
background:#ee5;
}
#sidebar2,#sidebar1
{
float:right;
width:30%;
background:#5e5;
}
#footer
{
clear:both;
background:#5ee;
}
#header
{
background:#55e;
}
HTML
<div id="header">header content</div>
<div id="sidebar1" class="side">sidebar1 content</div>
<div id="maincontent">maincontent content</div>
<div id="sidebar2" class="side">sidebar2 content</div>
<div id="footer">footer content</div>