How to set width of the floating div relative to neighbour - html

I have a page which looks like this:
Content contains a static table of fixed width (determined by content) inside a centered div. Below content there is a div that contains a line of text and an image below that text. It is meant to float on the left of the Content. The page and image has max-width and max-height. But when page is resized, Image shrinks twice slower than the page. This causes the page to look like this:
I want Image to always be filling the most of that white gap on the left. When the page is resized, the Image should also resize accordingly.
http://jsfiddle.net/FZ4KG/
Html:
<section align="center">
<h4 align="center">Heading</h4>
<div align="center">
<table>Content</table>
<div id="image_box">
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
</section>
Css:
#image_box {
padding-left: 15px;
height: 0px;
top: -75px;
position: relative;
}
#image {
float: left;
max-width: 20%;
}

A few things before I'm able to fully comprehend what it is you're looking for.
It's strange how you're using the HTML5 <section> tag with a deprecated, and as of HTML5 removed, align attribute. And still strange the use of an inline style when using css on those elements.
I will assume you're looking to center those elements within their parent containers. To achieve this, you would need to use a set width and set the horizontal margin of the element to auto.
div {
margin: 0 auto;
}
You also have a typo in your mark up. The DIV id says imabe_box. Assume it's supposed to be image_box.
<div align="center">
<table>Content</table>
<div id="imabe_box"> // ID should be set to 'image_box'
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
Please add more code or reply to the answer and we can help you further.

Related

Flexbox, limit images heigh/width within space available

I have a fixed size wrapper consisting of:
Header that is sized to the whats inside
Footer that is fixed size
Content container that should use the remaining space of the wrapper
The problem occurs with images. I would like for images to resize to fit the content container both in height and width. Right now images overflow the wrapper in height.
Here is the code. The wide image is acting correct, resizing to fit, but the long giraf is not.
In the following fiddle overflow is set to scroll to debug. The endgoal is no overflow.
https://jsfiddle.net/sghp68r0/
A not so flexible solution would simply be to give the imageFit class a height like
img {
max-width: 100%;
max-height: 100%;
}
.imageFit {
object-fit: contain;
height: 150px;
}
But this I would rather avoid hardcoding the height.
My goal is that it looks like this (no overflow):
if i am right you want this. Please do let me know.
Drag the height in fiddle you see the images are adjusting with heigh.
Here is my fiddle link:-
https://jsfiddle.net/exa3y7w9/
<div class="wrapper">
<div class="header">
Sized to content <br />
Sized to content <br />
</div>
<div class="content">
<div class="imageWrapper">
<img src="https://cdn.pixabay.com/photo/2017/10/10/22/24/wide-format-2839089_960_720.jpg">
</div>
<div> 2 images and some text that fills remaining space </div>
<div class="imageWrapper">
<img src="http://clipart-library.com/data_images/258951.jpg">
</div>
</div>
<div class="footer">
There is some text in fixed size container
</div>
</div>
So apparently you can fix overflow in flexbox by setting height of the containing div to 0 (for safari it should be min-height: 0). Have a look at this example. If you remove height breaks.
https://jsfiddle.net/oz20qgw9/
.content {
background-color: green;
flex:2;
height: 0; //THIS IS THE KEY!
}

Text top align on CSS

I have created an HTML framework to display a top banner containing an image a centered title and a clock, below it, there is a stage area to display some graphs and images.
The problem I am encountering is that when I increase the font size of the title in the banner, I am left with some white space above, and with increasing the font size, the text disappears (I have set the containing div to hide the overflow). Ideally, this spacing could be reduced with some property.
I tried searching for aligning the text to the top, but unfortunately I just cannot find it! The behaviour is present even when the text and its div are the only things in the document.
Link to the jsFiddle with the whole page here
Link to the isolated div here
Is there a property I am missing, or another trick to move the text upwards?
<div id="banner" style="width:100vw;height:10vh;overflow:hidden">
<div id="bannerLeft" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:red">
img
</div>
<div id="bannerMiddle" style="width:70vw;height:100%;overflow:hidden;float:left;background-color:blue">
<p style="text-align:center;font-size: 2.5em;">Staged Title</p>
</div>
<div id="bannerRight" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:green">
<p id="timeNow" style="font-size: 2.5em;text-align:center">
10:00
</p>
</div>
</div>
<div id="stage" style="width:100vw;height:85vh;overflow: hidden;background-color:yellow">
Stage is managed with JS
</div>
The problem is the <p> tag inside the div. You realy don't need it here. Remove it, and add the styling to the div element:
Staged Title
Demo:
.bannerMiddle {
width: 70vw;
height: 10vh;
overflow: hidden;
float: left;
background-color: blue;
text-align: center;
font-size: 2em;
}
<div class="bannerMiddle">
Staged Title
</div>
<br style="clear: left"><br>
<div class="bannerMiddle">
<p>Staged Title (BAD)</p>
</div>

Full screen image within smaller container

I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too

Trying to align images centrally

I have 4 icons that align horizontally. However I would like to have them align with each other through a center line if that makes sense. At the moment they aren't matching up. The top of one image may be in line with the middle of another for example. The icons are of different sizes but I don't mind that, as long as the align centrally. Here is my html
<section class="feature">
<div class="grid_4">
<img src="images/image-1.png">
<p>
Email
iamapdige#<br>hotmail.com
</p>
</div>
<div class="grid_4">
<img src="images/image-2.png">
<p>
Mobile<br>
Call or text 085PIDGEON
</p>
</div>
<div class="grid_4">
<img src="images/image-3.png">
<p>
Facebook<br>
Check us out on Facebook!
</p>
</div>
<div class="grid_4">
<img src="images/image-4.png">
<p>
Twitter<br>
Tweet me! #pidgeon
</p>
</div>
</section>
And the relevant CSS
.feature {
margin-top: 70px;
font-size: 15px;
font-family: sans-serif;
}
.feature img {
float: left;
margin-right: 6px;
}
Thanks for any help. If it's not clear what I mean then I can upload a picture of the PS template to explain.
If the icons are all different widths but you want them all centered on top of each other, try putting the images in spans. Set the width of the spans to be the width of the widest icon, and use text-align:center on them.
Check this JSFIDDLE
Basically, you need to adjust the margins inside, and make the bordering container that i added equal to the sum of the widths and margins of the grid_4s.
so:
.feature{
width:600px;
margin:auto;
}
.grid_4{
width:100px;
margin:25px;
}
What the margin auto does is that is adjusts its margins automatically within section's width of 100%. the margins auto-position itself in the center based on the width of the container feature. therefore if you want your images central and aligned horizontally, then they need to perfectly equal the width of the feature div, so add up the width and margins (horizontally) and come with the answer as the width of feature, if you follow...
hope this helps!

Simple CSS MasterPage layout

I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):