Following some instructions given in another question, I've rewritten a web page used to print pdf and to be shown in the web. Here's some code:
/** CSS File **/
body {
background-color: lightcyan;
border: 1px solid black;
font-family: sans-serif;
height: 268mm;
margin-bottom: 13mm;
margin-left: 11mm;
margin-right: 12mm;
margin-top: 10mm;
width: 187mm;
}
img {
margin: 0mm;
padding: 0mm;
max-height: 100%;
max-width: 100%;
}
div.ClrOvFlw, div.Pedice {
clear: both;
overflow: auto;
}
div.Left, div.Left75 {
clear: left;
float: left;
}
div.Right, div.Right25 {
clear: right;
float: right;
}
div.Left75 {
background-color: yellow;
height: 20.74mm;
margin-right: 1mm;
padding: 0mm;
width: 129mm;
}
div.Right25 {
background-color: blue;
height: 20.74mm;
margin-left: 1mm;
padding: 0mm;
width: 51mm;
}
<!-- HTML -->
<body>
<div class="ClrOvFlw">
<div class="Left75">
<img id="Logo" src="../Box Logo Testata/Logo.jpg" alt="Mark">
</div>
<div class="Right25">
<div id="Bandiera">
<img id="BandieraImg" src="" alt="ITA">
</div>
<div id="MadeInItaly">
MADE IN ITALY
</div>
</div>
</div>
</body>
As you can see, I've calculated the dimensions on a given template. If I don't put srcs in the img tags everything is fine, but when I put them on, the Right25 div flows on another row because the Left75 div becomes bigger. Here's a link to fiddle.
What am I missing?
EDIT
Here's the image you requested.
The problem isn't that the left element is increasing in size, it's that the right element is being pushed in from the right side of the screen. Why? because the css is making room for a scrollbar, and your width values are all fixed length.
It's being caused by the overflow: auto CSS being applied to div.ClrOvFlw here:
div.ClrOvFlw, div.Pedice {
clear: both;
overflow: auto;
}
For some reason, when you add an image to the src, the CSS is expecting the requirement of a scrollbar - Can't say for sure, but I would imagine it has to do with the size of the image before the constraints of the div it is being put into are applied. If the resolution of the image is large enough that - were it not shrunk to fit inside the div - it would require an overflow to be seen. You can test this by putting an image that is naturally small in as the src instead, like http://www.w3schools.com/tags/smiley.gif. Note that the divs fit as expected when this is your source.
Your solution is either remove the overflow: auto from the ClrOvFlw div, or resize your source image so that its natural resolution is small enough that it would fit within the prescribed height of the containing div.
Note: the fixed length stuff is an issue because the containers can't respond to the reduced space - 25% of the containing div is no longer 51mm. You could try using % widths instead if that is an option - it may also alleviate the issue without having to redo your image.
Related
Desired Outcome:
Further Details:
Right now I am setting the Div height based on estimates (ie. 10% for search bar, 60% for middle and 30% for bottom) and set the thumbnail size to fit well on my Samsung Phone. The problem is that on different phones, the width is different and Div3 ends up with large borders. To complicate matters, Div2 can scroll up/down (minor problem) but Div3 can scroll left/right (moderate problem).
All thumbnail images are guaranteed to be 16:9 (I believe) as they are obtained from here https://img.youtube.com/vi/NJ2YyejQjpw/maxresdefault.jpg
I'm having conceptual issues trying to size a div (Div3) based on the height generated when an image is stretched the (more or less) the screen width)
Question:
How can I get the three below divs, while allowing for (1) vertical scrolling in Div2 and (2) horizontal scrolling in Div3
Code:
JSFiddle code. Try on iPhone X, it looks weird
Important sections:
#search_bar {
width: 100%;
height: 10%;
border: 0px;
float: right;
padding:0px;
position: relative;
background-color:red;
}
#search_results {
width: 100%;
height: 58%;
padding:4px;
float: right;
overflow:auto;
background-color:green;
}
#playlist_reel {
width: 100%;
height: 32%;
padding:4px;
clear: both;
overflow-x: auto;
white-space: nowrap;
background-color:blue;
}
I went off the diagrams you included and tried to replicate a simple version of it.
Use flexbox for column layout
Have #search_results take up as much space as possible
Have #search_barand #playlist_reel take up only the space they occupy (totally adjustable)
Use a background-image for #search_results so the element is always covered.
Use a static img in .bottom so that it takes up actual DOM space
As for scrolling, the requirement feels a little broad at the time I am posting this. Maybe this demo will get you close enough to experiment with scrolling on your own.
Note: This demo is more easily viewed in either "full page" mode (here in SO) or in the jsFiddle.
html, body { margin: 0; }
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
width: 380px;
max-width: 100%;
margin: 0 auto;
}
#search_bar [type=search] {
width: 100%;
padding: 1em;
font-size: 1.25rem;
}
#search_results {
flex-grow: 1;
background-image: url('http://placekitten.com/400/500');
background-size: cover;
}
img {
max-width: 100%;
height: auto;
}
<div class="container">
<div id="search_bar">
<input placeholder="Search" type="search">
</div>
<div id="search_results"></div>
<div id="playlist_reel">
<img src="http://placekitten.com/400/50" alt="">
</div>
</div>
jsFiddle
as you can see this site has a horizontal scrollbar. The problem happens only in the pages with the comments field - the <div id="commentsbackground">.
I want to keep the same style, the same view, however I want the scrollbar to disappear.
<div id="commentsbackground">
<section class="comment">
<section class="commentsMain"></section>
<section class="fbcommentbox"></section>
</section>
</div>
The CSS is the following:
#commentsbackground {
width: 6000px;
margin-left: -1172px;
background-color: #EAECF3;
overflow: auto;
section.comment {
height: 500px;
margin-left: 1172px;
margin-top: 20px;
.commentsMain {
width: 500px;
padding-left: 20px;
float: left;
border-right: 1px solid rgba(0,0,0,.13);
padding-right: 20px;
background-color: #E8E8E9;
padding-top: 10px;
.fbcommentbox {
width: 434px;
float: left;
margin-left: 0px;
background-color: #E8E8E9;
padding-left: 15px;
padding-top: 10px;
If I remove margin-left: -1172px; from #commentsbackground and I remove margin-left: 1172px; from section.comment the scrollbar is still there, but the left side becomes white.
If I also remove the width: 6000px; then the two comment boxes break, and the white appears in the right side as well.
If instead I remove only width: 6000px;, but I keep the margin-left's, then it breaks and I see white on the right.
I can't find a reasonable solution because the <div id="commentsbackground"> is inside the <section class="middle_single"> and the latest has a width of 892px... but I need the background of <div id="commentsbackground"> to be grey... for every resolution of the screen... the same as you can see it now. But without scrollbar.
I hope somebody can help.
[EDIT] - Today I tried to put the whole comment box in the footer.php file. Just before the footer-bottom div. It worked fine, however the site started to have other problems such as: the comments box was showing everywhere, also on the homepage and in the pages and posts with the comments disabled from the wp-admin. So I think that also this was wasn't the right solution for me.
The whole idea of 6000 pixel width and a thousand pixel offset is rediculous. Try changing some of this CSS to remove that crap, seems to work for me.
These will get rid of the scroll bar, but it will make the elemtents sit on top of eachother due to being too wide.
.commentsbackground { margin-left: 0; width: 100%; }
.comment { margin-left: 0; }
This will reduce the size of the right column, letting the comments and form sit side by side. Please adjust this.
.fbcommentbox { width: 335px; }
<span style="height: 200px; width: 335px;"></span>
<iframe width=335>
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.
I'm building a portion of a portfolio site that displays a 4-column grid with images and their titles using relative units of measurement so that it scales with the browser window's size. Right now it works fine with each .item assigned a property of float:left and max-widths defined as a percentage of the overall #container's width (in this case 1100px or 68.75em). It works fine with the exception of the titles, which go below each image in a span. When one of the titles is longer than the 220px (or 20% of the container) the height increases and the items in the next row will get "stuck" on it.
I can fix this easily using PHP to insert a clear:both div after every 4th div (to effectively make a new "row" in the html) but I plan on using media queries or some other device to reduce the amount of columns to 3, 2 and 1 as the browser window shrinks. It would be easier if I could simply have the rows defined by floating the items. Possible solutions?
Styles:
body {
font-size: 100%;
line-height: 100%; /* Neat */
font-family: Helvetica, Arial, sans-serif;
}
#container {
max-width: 68.75em; /* 1100px */
margin: 40px auto;
border: 1px solid #000;
}
.item {
float: left;
width: 20%;
max-width: 20%;
height: auto;
padding: 2.5%;
background-color: #eee;
}
.item img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.item span {
width: 100%;
max-width: 100%;
margin-top: 1em;
display: block;
text-transform: uppercase;
line-height: 1.5em;
}
HTML:
<div id="container" class="cf"> <!-- "cf" comes from my reset, it's a clear-fix -->
<div class="item">
<img src="images/placeholder.png" height="220" width="220" alt="" title="" />
<span>A Title that is Slightly Longer than the Others</span>
</div>
<div class="item">
<img src="images/placeholder.png" height="220" width="220" alt="" title="" />
<span>A Title</span>
</div>
... (repeat those divs)
</div>
Possible options:
Set the height sufficient to cover two line cases
.grid-item { display: inline-block; vertical-align: top; }
Change the title span to a div, set height and overflow: hidden
I would suggest giving it a short title. If that's not possible, you could try
.item > span{
height: 0;
position: relative;
}
The images will display appropriately, but the too-long titles will display over the image beneath said title. I don't know if this is acceptable for your needs or not, but you may find it useful.
I need help with a recurring problem that happens a lot. I want to create a header that consists of 3 sections which are positioned inline. I display them inline using the following css code: display: inline & float: leftThe problem is that when I resize my browser window the last div is pushed down and isn't displayed inline. I know it sounds like I'm being picky, but I don't want the design to distort as the visitor change's the monitor screen. I have provided the html and css code below that I am working with below. Hopefully I have explained this well enough. Thanks in advance.
HTML
<div class="masthead-wrapper">
</div>
<div class="searchbar-wrapper">
</div>
<div class="profile-menu-wrapper">
</div>
CSS
#Header {
display: block;
width: 100%;
height: 80px;
background: #C0C0C0;
}
.masthead-wrapper {
display: inline;
float: left;
width: 200px;
height: 80px;
background: #3b5998;
}
.searchbar-wrapper {
display: inline;
float: left;
width: 560px;
height: 80px;
background: #FF0000;
}
.profile-menu-wrapper {
display: inline;
float: left;
width: 200px;
height: 80px;
background: #00FF00;
}
display them inline using the following css code: display: inline & float: left
Aside... You are actually floating the element, not displaying it inline. The display:inline rule is irrelevant here since floated elements are implicitly displayed as block.
But anyway, your problem is that your sections are all of a fixed width (200 + 560 + 200 = 960px), so when the browser window reduces to near this width (960px plus a bit more for your page margins) the design is going to break - your containers wrap.
If you still want these containers to be fixed width and to simply be cropped on a smaller browser window then you could perhaps add overflow:hidden to your #Header. At least then it won't push the #Header height down beyond 80px (which is a problem you seem to be experiencing). But content will be hidden on the smaller screen.
Or, make all your column containers dynamic and give them percentage widths, so that they flex with the available width. eg. 20%, 60% and 20% respectively. Although this might make the widths too small or too large at some window sizes. You could add a min-width and max-width (with an absolute amount) to limit this. But at narrow widths height:80px is not going to be enough, so min-height:80px would perhaps be more appropriate, if your design allows for your #Header to be flexible?
With the percentage, be sure to no have padding on your columns. The padding will be add some width. For your header, you can use the position:fixed, and for IE6 and 7 use position: absolute ( the position :fixed ) doesn't work for them.
For the columns, you can add the clearfix method who can help you for placing without problem the rest of the content.
Your HTML can be something like this :
<div id="header" class="clearfix">
<div id="col01">Column 01</div>
<div id="col02">Column 02</div>
<div id="col03">Colunm 03</div>
</div>
And the CSS :
#header {
position: fixed;
height:80px;
width:100%;
}
#col01,
#col02,
#col03 {
float:left;
}
#col01,
#col03 {
width:20%;
}
#col02 {
width:60%;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Hope it's helping you :-)