Hi I have some html that looks like this:
<div id="wrapper" style="background-color: red;">
<div style="margin: 0px auto; width: 960px;">
Text here...
</div>
</div>
The wrapper-div doesn't fit the <body>, when I resize the browser window to be lower than 960px, the wrapper gets as small as the browser window size. I want to get the wrapper at least as wide as the content inside it. I really have a hard time figuring this one out. Any suggestions?
Set wrappers style to: min-width: 960px .. same as inner div
Set the width of upper div
<div id="wrapper" style="background-color: red; width: 960px;">
<div style="margin: 0px auto;">
Text here...
</div>
</div>
for a detailed description refer this
Related
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!
}
I want to first div be center.
margin:auto not working with width:auto.
width value must be auto
<div style="display:block;margin:auto;width:auto">
<div style="background-image:url(assets/img/asd.png) "></div>
<div style="background-image:url(assets/img/abc.png)"></div>
<div style="background-image:url(assets/img/asd.png)"></div>
<div style="background-image:url(assets/img/asd.png)"></div>
</div>
you can't. Obviously you are trying to center these images. Just use this instead:
<div style="text-align: center;">
<div style="display: inline-block;background-image:url(assets/img/asd.png) "></div>
<div style="display: inline-block;background-image:url(assets/img/abc.png)"></div>
<div style="display: inline-block;background-image:url(assets/img/asd.png)"></div>
<div style="display: inline-block;background-image:url(assets/img/asd.png)"></div>
</div>
And it would be better to use classes and a stylesheet instead of inline CSS....
You can't.
Your outer div is 100% wide and it fills the entire window, which makes it pointless to be centered.
Rather, you should maybe wrap a container around your code which has a width in either px or % and set margin: 0 auto; on that. And your code inside would then be set to width: 100%;
If, on the other hand you would want your content inside to be centered, use text-align: center;
I am displaying three div's side by side, they look well at normal screen size but on zooming screen as the div shrinks text inside it also shrinks and images seem to be cut (size of image is being cut on further zoom). Bottom line I don't want content inside divs messed up on zooming, tried overflow: scroll for body but on zooming no scroll bar appears. I think scroll bar would help in keeping the content inside div safe.
jsfiddle this will help you understand
<div id='container' style='width:100%;'>
<div class='left' style='height:20px;width:21%;float:left;border:1px solid black;box-sizing: border-box;height:200px;'>
</div>
<div class='center' style='height:20px;width:56%;float:left;border:1px solid blue;box-sizing: border-box;height:200px;'>
</div>
<div class='right' style='height:20px;width:23%;float:right;border:1px solid red;box-sizing: border-box;height:200px;'>
</div>
</div>
When using % in width be carefull because the border, margin, padding all counts to the width calculation, thats probably why your code fails.
To make it work you can use box-sizing: border-box; in your divs take a look:
<div id='container' style='width:100%;'>
<div class='left' style='width:21%;float:left;box-sizing: border-box;'>
</div>
<div class='center' style='width:56%;display:inline-block;box-sizing: border-box;'>
</div>
<div class='right' style='width:23%;float:right;box-sizing: border-box;'>
</div>
</div>
Take a look at this fiddle fully working http://jsfiddle.net/0heq8dz3/
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.
I have a floated div with "sidebar" text. Its parent container has text as well.
I don't want to have text below my floated "sidebar" div:
example http://img864.imageshack.us/img864/6058/screenshot2011052613084xv.png
How can I fix this?
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
If it doesn’t mess up anything else, you can use overflow: hidden or overflow: auto to fix this:
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<div class="next-to-float" style="overflow: hidden;">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
See http://jsfiddle.net/pauldwaite/YL5P3/
I’ve written about this more fully here, including code to make it work in IE 6: xHTML/CSS: How to make inner div get 100% width minus another div width
I still don’t really understand the reasoning behind why overflow: hidden does this, but I understand that it does follow from the CSS spec.
Set right margin on non-floated element
JSFiddle
The only requirement is that you must predefine your floated element's width. Then it can have whatever height you like and the non-floated content (when applied right margin) won't stretch under floated element.
How it works?
We have floated element on the right with width = X
We have usual content but set its right margin = X+s where s is some predefined space between your content and floated element so they don't touch.
And that's it.
Since you have multiple content elements (heads, paragraphs) you have to put them inside a container with this right margin setting.
<div id="parent">
<div id="floated">Foo bar</div>
<div id="content">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
And CSS:
#floated
{
float: right;
padding: 1em;
background: #ccc;
width: 10em;
}
#content
{
margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}
Why is this solution better than setting main content width?
Because setting main content width will only work when you want to limit your document content to a fixed width (like 960 grid). But when you want your content to stretch over the whole browser window width, this solution will work regardless of browser window size.
And a small advice
Avoid using inline styles whenever possible because maintainability of your application/site will become a nightmare.
You can nest 2 div tags inside the container. Float them both and resize them as you need them to be.
Set a bottom margin on the floated element that equals the length of the remainder. Or add a width to the larger element and float it the other direction.
<div id="parent">
<div id="floated" style="width:200px; float:right">Foo bar</div>
<div id="content" style="width:600px; float:left">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
OR
<div id="parent">
<div id="floated" style="width:200px; margin-bottom:200px; float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
its easy simply add width in [P] tag see here
example
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p style=" width: 500px; ">Text!</p>
</div>
for example your ( id="parent" ) have 800px width
and (id="floated") right-side bar have 200px width
then make your [P] 800px - 200px = 600px
so set your [P] width to 600px
---------- or
if you want some space between text and bar make [P] width 580px
it means 20px for space