Floating box leaves container coming up short - css

I know this is a common question but I just can't seem to get it right. I have tried everything except the one thing that will make this work, including various placements and combinations of clear and overflow settings. Here's my code (stripped down for posting)
<style>
#message { border:thin red dashed; overflow:hidden; }
#message p { border:thin red solid; }
#line1 { border:thin blue solid; }
#text { text-align:center; background-color:#FCF; vertical-align:middle;}
#photo { float:left; width:160px; border:thick black solid;}
</style>
</head>
<body>
<div id="Main">
<div id="line1">
<div id="message" >
<div id="photo" > <!-- floated pic box -->
Pretend a picture is here. Pretend a picture is here.
Pretend a picture is here. Pretend a picture is here.
</div> <!-- photo -->
<div id="text"> Click here to see all Key West Tours, Attractions and Packages<br />
Buy Online and Save!
</div> <!-- text -->
</div> <!-- message -->
</div> <!-- line1 -->
</div> <!-- Main -->
I want the text to be aligned middle and realize it's because the actual text div (pink box) can align middle all day long and as long as it stays that height it won't change.
Question: How do I get my text div to grow to the height of the faux picture box so I can align it to the middle of that section?

There isn't really a good way of going about what you are trying to do. Since you have your image in its own div floated to the left it is hard to get your text div to align with it.
I would just give the text div some top margin so that it atleast starts somewhere near the middle of the image, but obviously that is not a specific solution, its more of another option.
If you absolutely need to have it centered one of these links could help,
phrogz.net/CSS/vertical-align/index.html
or
webtoolkit.info/css-vertical-align.html
Alternatively you could try putting the image and the text together in a single div tag and give the image vertical align: middle, as long as there are no line breaks that would align the text to the middle of the image.

Related

css3 transform scale chops off top third of image

I'm trying to understand why, when I use scale, it chops off the top third of the photo, if centered, or if left justified, the top and left edges. I gather it has something to do with the scaling occurring from the mid-point of the img. The code I am using seems trivial having no other content other than the button. What causes this and how does one do it correctly so the entire photo displays within the div?
The intended result is that when you press the "+" button, the scaled photo would remain in the original sized div allowing the user to scroll through enlarged photo.
<head>
<title>Zoom photo</title>
<style>
.largeimage img { transform:scale(2); }
</style>
<script>
function explody() {
document.getElementById("photocontainer").classList.add('largeimage');
}
</script>
</head>
<body >
<div style="overflow:auto;transform-origin: top left;text-align:center;" id="photocontainer" >
<img src="Desktop/graphic/Oliver1950/IMG_0435.jpg">
</div>
<input type="button" onClick="explody();" value="+">
</body>
</html>
That is because the origin of the scale happens from the center (horizontal and vertical center) of the image. If it is located in a <div> close to the top of the page, it will be cut off. If it is located in a <div> that is set to hide overflow, it will also be cut off.
The trick is to either make space around the wrapping <div> to accommodate expanded dimensions of the image, or simply alter the transform-origin property.
div {
text-align: center;
}
div:hover {
transform: scale(2);
transform-origin: top center;
}
<div>
<img src="http://via.placeholder.com/350x150">
</div>

CSS overlapping error

I have a <div> called big box that contains another <div> called small box. Each small box contains an image and text wrapped inside a separate <div> I also have a diagram to explain my situation.
http://s21.postimg.org/4thwzlt9j/Untitled.jpg
The problem is when the text is larger than the div wrapping it. If I create another small box, It will overlap the above small box.
How can I modify the CSS so if the elements such as the text go over the <div> the small box won't overlap it.
http://s18.postimg.org/kqkqlp6w9/Untitled.png
I don't want to use margin because it is fixed. What happens if one small box has only 3 words of text and there's a huge margin at the bottom?
How can I make it dynamically, so if the text is bit over, the second small box won't overlap it but will instead adjust it's size so it will be at the bottom with space?
.bigbox {height: 700px;
width: 950px;
background:#FFFFFF;
border-style:solid;
border-color:#D5DADA;
border-width:1px;}
.smallbox {text-align:center;
height:300px;
width:250px;
background: #FFB236;
position:relative;
left:0px;top:0px;
margin-bottom: px;}
.imagebox img{margin:6px 6px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;}
My HTML
<div class="bigbox">
<div class="smallbox"><div class="i"><img border="0"src="im.jpg" alt=""> </div>This is the text and it is wrapped inside a div. </div>
<div class="smallbox"><div class="imagebox"><img border="0"src="im.jpg" alt=""> </div>This is the text and it is wrapped inside a div.</div>
Simply removing the height attribute of the .smallbox worked for me.
The problem with specifying a fixed height is that it simply does not allow the div to expand such that all the content fits inside.
If there is more content than what the div can hold, it overflows. The overflow can be visible or hidden depending on how you specify it, but it does not change the layout and does not act as content.
http://jsfiddle.net/wtBUd/

Two CSS columns - when width shrinks right hand column goes to bottom of left hand column [duplicate]

This question already has answers here:
How to avoid wrapping in CSS float
(2 answers)
Closed 3 years ago.
On the left we have a context sensitive navigation/information bar. At times there is very little information in it and other times it takes up the entire height of the page. I've seen a bunch of suggestions on other posts about floating, etc but nothing I've tried works.
.tablebox {float:left;position:relative;z-index:1;border-right:1px solid #000000;}
.groupbox {float:left;position:relative;z-index:-1;border-right:1px solid #000000;}
So two divs for the sidebar - one to create the background layer which will take up the entire height of the page and then tablebox with the actual content on it - it could have a different background color as required.
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
Then we have the right hand side main content... again the idea being that tablebox would have a different background colour and appear to float on top of the page.
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
Now if the browser width gets to be too small the right hand div falls below the sidebar. Whether there's room there or not.
SOLUTION:
The problem was that the two sets of divs's parent did not have a defined size. As the browser window was resized the children got shuffled to fit inside of the new size. By defining a parent div with a fixed width and adding a overflow:auto the parent would not change even if the browser window was.
Note: This is not the best way to resolve this obviously - this means that the content does not dynamically format itself. It now has a fixed width. In my case I have no other choice. It is a band aid solution but if you're in the design stage think about people viewing your page from a cellphone or old people with their low resolution screens and giant text.
To be clear for those easily confused:
<div style="width:1053px;overflow:auto">
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
</div>
But again - if you have a choice don't do this! Fixed width will not make your site very pretty on some devices.
<head>
<style>
body {
padding:0;
margin:0;
}
div {
width:25%;
height:25%;
}
div.left {
background-color:red;
float:left;
}
div.right {
background-color:yellow;
float:right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
http://jsfiddle.net/8gNDU/2/

Why isn't my div content showing?

I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible

Slicing a psd with div+css

I'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!
You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>
The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.
Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)
As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.
Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.

Resources