As this link : https://jsbin.com/tudeseqomi/edit?html,css,output
the panel width and height shoule be 800px and 450px.
So I want to let the part:
<div class="panelFrame">
<div class="panel">
</div>
</div>
can scroll because it's too big over the blue zone ,
How can I do this ?
p.s. I don't know why the <div class="panelFrame"> part become whit on jsbin, on my local it's green
add overflow-x: scroll; on .rightpart class
.rightpart{
background-color:blue;
height:500px;
overflow-x: scroll;
}
See below
set overflow:hidden/scroll in css for the green div
You have given the color green to which is overwritten by the class .panel in one of the included CSS from the following link, https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/less/panels.less.
Use the property overflow:scroll to have scroll on the element or reduce the width of the 'panelFrame' and use the above property.
Related
http://www.clickityclick.me/HarcourtV3/index.html
I have applied a background colour to my footer which will not display correctly.
At the smaller screen sizes (<992px) the background colour displays as expected. At the larger sizes it does not display, except for in the padding portion at the top of the div.
I have tried:
setting the footer element as having a background colour (footer {background-color:...})
setting the containing div as having a background colour (#fatFooter {background-color:...})
applying a background colour class to the containing div (.grnBG {background-color:...})
using !important in all cases above
Any suggestions at this stage welcome.
Adding overflow: hidden to both your footer and the #fatFooter div will solve the issue. Simply add this CSS to your stylesheet:
footer, #fatFooter {
overflow: hidden;
}
You need to add clearfix to #fatFooter like this :)
<div id="fatFooter" class="VerPad0015 clearfix">
<div class="col-md-3 col-sm-6 clearfix">
(just after the <div id="#fatFooter">
This adds FLOAT:LEFT.
remove it and everything will be fine
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
I set background image in #section-content, background is repeat-x, and background color in #section-footer. Problem is that backgrounds are cut by the amount of space that is first seen.
Is there any way to fix this?
There is image with problem, you can see that footer background color is cut off when is resolution or window small and I scroll right...
Problem image
You need to define min-width to the footer. Consider your main page wrapper has width: 980px; then assign min-width: 980px; to the footer element. When you resize the browser window, your footer knows that he has to repeat the background to the specified min-width even when your page gets horizontal scroll.
my html structure looks like this
<div id="page">
<div id="section-header">
...
</div>
<div id="section-content">
...
</div>
<div id="section-footer">
...
</div>
</div>
so I add to css
#page {
margin: auto;
overflow: hidden;
min-width: 1180px; /* it fits on my site */
}
and problem is solved...
I'm trying to create the following layout in CSS:
It is a typical web layout where all the content is in a wrapper DIV that has a defined width and is centered on the page.
However, the purple background is a CSS gradient and needs to fill the entire width of the browser (and not just the width of the content wrapper). Furthermore, different pages will have different lines of headline/intro text (e.g. some pages might have 3 lines, others just 1) and so the purple background needs to match the height of this content.
I am also using a CMS which places all the content in a wrapper that has a width and is centered with margin:auto.
How can I achieve the layout?
At first I though I could use position:absolute on the headline/intro div. This works great. Except the rest of the content gets hidden behind the headline/intro div.
See an example here: http://jsfiddle.net/5BkX6/1/
I then tried using position:relative on the headline/intro div and then using negative left values together with padding to stretch the background of the DIV while keeping the content centered.
See an example here: http://jsfiddle.net/4DZYr/1/
This method works great, except it creates a horizontal scroll bar. I know I can apply overflow-x:hidden to the main wrapper DIV to hide the scroll bar, but I would prefer not to have it in the first place.
How can I achieve my goal. I do not want to use jquery to get the height of the headline/intro DIV.
This should give you the layout you want ^^
Here is the Html
<body>
<div class="header">
<div class="contentheader">This is the header</div>
</div>
<div class="container">
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
And here is the style
.header{
width : 100%;
background : #0033aa;
height : 100px;
}
.contentheader{
width : 1000px;
margin : 0 auto;
}
.container{width : 100%;
}
.content{
width : 1000px;
margin : 0 auto;
}
.left {
width : 300px;
display : inline-block;
height : 200px;
background : #3300aa;}
.right{
width : 700px;
display : inline-block;
height : 200px;
background : #aa0033;}
Ok here is the site:
http://danberinger.com/
If you view the source for the HTML and CSS you can see that I have set the height of the div in the middle to 100% and given it an overflow property value of hidden, it is called "main_content". I realized that the height value is having no effect on what is displayed, the overflow value of hidden is allowing the background color of the main_content div to extend down to the footer. I guess I am wondering what the best way for me to achieve a variable div height on each page or "main_content" while maintaining the background color. Am I doing this the right way or am I using some kind of css hack that is not the proper way to do it. All insight is welcome. Make sure to take a look at the source HTML and CSS before giving me an answer.
The easiest solution would be to assign the background color to your body element. Something like this:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color:#cccccc;
}
This will also eliminate the few pixel white border around the edges, if you want to maintain that, take out the margin and padding declarations.
I might have misunderstood what you want, but try this:
Replace div#intro_container with:
div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}
And remove the height property from div#messagebox.
I prefer to do in this way:
In the content of div 'main-content', add
In your case it was
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
</div>
It cam be rewritten as
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
<div style="clear:both"></div>
</div>
AFAIK This is a standard way to achieve what are you doing.