I have a CodePen here.
I am trying to allow the image extend outside of it's bootstrap container horizontally, up to the maximum width of the viewport and allow no horizontal scrolling. I am also trying to hide the vertical overflow.
I'm close but haven't quite figured it out. I've tried combinations overflow-y/x:hidden/visible but couldn't get there.
Any suggestions?
Check this code for example.
#container {
width:300px;
height: 60px;
overflow: hidden;
}
#modules {
height:90px; /* 40px - more place for scrollbar, is hidden under parent box */
padding:5px;
white-space:nowrap;
overflow-x: scroll;
overflow-y: hide;
-webkit-overflow-scrolling:touch;
}
.module {
display:inline-block;
width:50px;
height:50px;
line-height:50px;
text-align:center;
background:#ddd;
}
.module + .module {
margin-left:5px
}
<div id="container">
<div id="modules">
<div class="module">aaa</div>
<div class="module">bbb</div>
<div class="module">ccc</div>
<div class="module">ddd</div>
<div class="module">eee</div>
<div class="module">fff</div>
<div class="module">ggg</div>
<div class="module">hhh</div>
<div class="module">iii</div>
<div class="module">jjj</div>
<div class="module">kkk</div>
<div class="module">lll</div>
</div>
</div>
Related
I am having an issue with my divs moving when the page is resized. If you look at the plunker you will see a Header with boxes below. If you resize the workspace by dragging the scroll bar to the left you will see how the page should be. I tried wrapping all items in 1 div named wrapper and tried both relative and absolute positioning with a min-width. I also did the same for body. After inspecting the page with firebug looks like the html tag should have sizing or positioning. That didn't work either (see below). I would like to be able to minimize my screen to 50% and maximize to 250% and keep the same initial layout as if my screen is at 95% based on the wrapper. Any ideas?
Here's plnkr
<html>
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative}
div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; }
<body>
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</div> <!--end wrapper -->
</body>
</html>
you could use percentage and fix min-wheight + set overflow to auto (looks like frameset .. not so nice actually)
Or you could try to relay on box-sizing and use vertical padding on percentage value(it will use parent's width as reference).
floatting pseudo can then, be used and will allow divs to grow taller instead showing a scrollbar.
. {
box-sizing:border-box;
}
.wrapper {
max-width:1300px;
margin:auto; /* ?*/
}
.wrapper #header ~ div {
border:double;
margin:0.4% 0.2%;
padding:5px;
}
#header, .right, .rightbottom {
overflow:hidden;
}
.left {
float:left;
width:30%;
}
.left:before {
content:'';
float:left;
padding-top:204.5%;
}
.right:before, .rightbottom:before {
content:'';
padding-top:30%;
float:left;
}
.wrapper #header ~ div.rightbottom {
border:solid 1px;
}
.rightbottom:before {
padding-top:60%;
}
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left">
</div>
<div class="right" >
<div class="gridStyle" data-ng-grid="gridOptions1">grid</div>
</div>
<div class="rightbottom">right bottom</div>
</div>
http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview
I'm not too sure of what kind of behavior you look for once there is real stuff in your pages.
If you want the header and the two divs to always have their own row, perhaps you could contain them each in divs that are set to width: 100%?
I want to expand header and footer to 100% with the variable middle content width.
you can find the source at http://jsfiddle.net/9dWcZ/
HTML:
<div class="header">
this is header
</div>
<div class="content">
this is content
</div>
<div class="footer">
this is footer
</div>
CSS:
.header, .footer {
width:100%;
background:#999;
height:200px;
position:relative;
float:left;
clear:both;
display:block;
}
.content {
width:2500px;
height:100px;
background:#9B191B;
float:left;
}
I don't want fixed header and no change in structure..
Please help..
thanks,
You can achieve this layout as follows.
You need to add a .wrapper element, this is essential:
<div class="wrapper">
<div class="header">this is header</div>
<div class="content">this is content</div>
<div class="footer">this is footer</div>
</div>
For the CSS:
.wrapper {
display: table;
}
.header, .footer {
width:100%;
background:#999;
height:200px;
}
.content {
width:2500px;
height:100px;
background:#9B191B;
}
The key is to apply display: table to the .wrapper block.
See demo at: http://jsfiddle.net/audetwebdesign/7jxLC/
So you want to expand it starting from the middle point?
If that's what you want you can use:
margin-left:auto;
margin-right:auto;
It will start to grow in width from the center then.
I'm currently working on a website, but it's important that it must fit on every page. I have 5 divs horizontal. The 3 divs in the middle are fixed sizes, 200 px, 400 px and again 200px. Now I have one on the far left and one of the far right, that should be equally big and fill out the screen no matter what resolution you're viewing the website in. So the middle part should be in the middle, and the 2 divs on the left and right of the middle part should fill out the screen. I have tried several techniques explained in other threads, but most are only for the left, or only for the right part and not working for both left and right. Maybe someone has a solution?
My HTML
<div id="left">
test
</div>
<div id="buttonsleft">
test
</div>
<div id="middle">
test
</div>
<div id="buttonsright">
test
</div>
<div id="right">
test
</div>
My CSS
#left{
float:left;
background-color:#C00;
width:15%;
height:100%;
}
#buttonsleft{
float:left;
background-color:#3F0;
width:200px;
height:100%;
}
#middle{
float:left;
background-color:#30F;
width:400px;
margin:auto;
}
#buttonsright{
float:left;
background-color:#3FF;
width:200px;
height:100%;
}
#right{
float:left;
background-color:#300;
width:15%;
height:100%;
}
Can be easily done using the CSS table layout.
See that Working Fidde
If the view port is smaller then 1000px wide, then the divs will shrink.
[you didn't specify what should happend if the view port is less then 1000px]
HTML:
<div class="Container">
<div id="left">left</div>
<div id="buttonsleft">buttonsleft</div>
<div id="middle">middle</div>
<div id="buttonsright">buttonsright</div>
<div id="right">right</div>
</div>
CSS:
* {
font-size: 25px;
color: white;
}
.Container
{
display: table;
width: 100%;
}
.Container > div
{
display: table-cell;
}
#left {
background-color:#C00;
}
#buttonsleft {
background-color:#3F0;
width:200px;
}
#middle {
background-color:#30F;
width:400px;
}
#buttonsright {
background-color:#3FF;
width:200px;
}
#right {
background-color:#300;
}
I'm a newbie with html so please be patient.
I'm trying to align 4 divs in parallel where the first,third and fourth div are static,the second div is empty and i need it to occupy the remain place e.g "width:auto".
I don't want to use table to solve the problem.
Is there a way to solve it using divs?
HTML:
<div class="container">
<div class="content" >
first
</div>
<div class="empty">
</div>
<div class="content">
third
</div>
<div class="content">
fourth
</div>
</div>
CSS:
.container{
strong textwidth:1020px;
height:40px;
}
.content{
position:relative;
background-color:#2cc2e7;
height:40px;
width:142px;
float:right;
margin-right:5px;
}
.empty{
background-color:#f1d486;
height:40px;
width:auto;
margin-right:5px;
}
You will need to change the order of the elements:
<div class="container">
<div class="first content">first</div>
<div class="content">third</div>
<div class="content">fourth</div>
<div class="empty"></div>
</div>
And then just float the first one to the left, other two to the right, and the .empty one, don't float it but set an overflow to auto —or hidden.
.content {
float: right;
width: 142px;
}
.first {
float: left;
}
.empty {
overflow: auto;
}
http://jsfiddle.net/GTbnz/
If you are prepared to add below the empty div then you could use the following:
<div class="empty">
</div>
with a style sheet of:
.container {
width:1020px;
height:40px;
display:table;
width:100%;
}
.container div {
height:40px;
display:table-cell;
}
.content {
background-color:#2cc2e7;
width:142px;
max-width:142px;
}
.empty {
background-color:#f1d486;
}
This was whichever of the 4 div's has a class 'empty' will auto-expand to fill the available space and the other div sizes will all be 142 px.
I've looked at so many posts on this I'm at a loss as to why its not working for me.
.firstCell
{
float:left;
width:40%;
text-align:right;
align:right;
border:1px solid white;
}
.cell
{
float:left;
width:auto;
align:left;
text-align:left;
border:1px solid white;
}
.newRow
{
clear:both;
width:100%;
}
.container
{
width:100%;
background-color:#DEEFF8;
margin:0px auto;
}
So, I basically have this:
<div class="container">
*Within this I have sections of like a form*
<div style="width:400px;border:1px solid black;">
<div class='firstCell'>File Name:</div>
<div class='cell'><html:text property="fileName" /></div>
<div class='cell' style='color:red;'>(Max 50 character)</div>
<div class='newRow'></div>
<div class='firstCell'>Copy Book Name:</div>
<div class='cell'><html:text property="copyBookName"/></div>
<div class='newRow'></div>
<div class='firstCell'><html:button property="populateFields" value="Populate Fields" onclick="showFields();"/></div>
<div class='newRow'></div>
<div class='newRow'></div>
</div>
*So this is one section, what I would like to happen is to position my form elements in this and then have it all be centered on the main div
</div>
Your main .container has 100% width, it doesn't matter if you center it, it will still start drawing it from the very left. The div inside of it that's responsible for the left-aligned box has no id/class, and you're doing no aligning on it. Technically your main container is centered, but everything inside of it is left-aligned.
Do you mean like this? http://jsfiddle.net/36ujG/
It's a little hard to understand what you are trying to center. All I did was added margin: 0 auto to the child div of container.