Css - Don't want elements below my floated element - html

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

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!
}

CSS set div container to fit body width not window width

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

Background color for div with child divs

<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
Check this tutorial, there is good info on floating in css. [link is dead]
Basically, if you provide an overflow:hidden; to the container div and provide width to the floated elements, your problem will be solved.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
EDIT
Another method which I use frequently in these days is to float the first element and set a margin-left to the following element. For instance:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
Just set the container div to overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflow style.
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
It's because both the divs are floated so the containing divhas no height. If you were to add a third child div whic wasn't a float, give it a height of 0 and clear:both you should see the background colour appear.
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
To color the empty part you should add following code:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.

Position Fixed in CSS within a bounding box?

I have a comment box like so...
<div id="comments">
...
</div>
Now, inside this comments div I have another div called box...
<div id="comments">
<div id="box">
...
</div>
</div>
The box div is position: fixed and it works mostly fine, but...
What I would like is, instead of the box div "floating" above all the content, for it
to be only scrollable within the comment div.
Do i need to use JavaScript for this?
You don't need JS for this. Simply add overflow:scroll and set the outer DIV to the fixed size. Then if internal DIV is larger than outer div you will see the scrollbar(s)
You can try it on this page
<style>
#comments { overflow: auto; height: 200px; }
</style>
<div id="comments">
<div id="box">
...
</div>
</div>
Give a suitable height for the container div ( comments ) and oveflow auto will make a scroll bar if the content exceeds the height of the container.
Overflow: the 'overflow' property

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):