So I am making a row of items in a semi elastic container. There is a profile image on the left, and then content floated to the right of it (both float left).
What I am trying to do is make the content float be max possible width instead of min possible width (as floating causes).
CSS:
#container {
max-width: 800px;
min-width: 500px;
}
.profile {
float: left;
width: 100px;
}
.info {
float: left:
min-width: 400px;
max-width: 700px;
}
HTML:
<div id="container">
<div class="profile">
IMG
</div>
<div class="info">
INFO
</div>
</div>
It doesn't make much sense to float something when you want it to expand to fill the parent. Just remove the float: left and the width properties from the .info division so that it will expand to fill the width of the parent and then add a margin-left: 100px to push it out from under the one that is still floated to the left.
if you are floating any element you have to give its parent element, clear:both, overflow: hidden;.
#container {
width: 800px;
clear: both;
overflow: hidden;
}
.profile {
float: left;
width: 100px;
}
.info {
float: left:
min-width: 400px;
max-width: 700px;
}
Related
I have a container div (that cannot be floated) with two children elements. I want child elements to be on opposite sides - first on left, second on right. On 100% browser width children summary width is less than container, but on greater scales it is not, so container should be greater too. How to set container to grow when it's gloat child grow?
UPD: something like this
I need all elements to stay one line in any scale.
<div id="page">
<div id="container">
<div id="left">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<div id="right">
right
</div>
</div>
</div>
<style>
#page {
background-color: grey;
width: 100%;
height: 300px;
}
#container {
/*this styles are needed to other parts*/
position: relative;
clear: both;
/*=====================================*/
background-color:red;
height: 50px;
width: 90%;
margin: 0 5%;
}
#left {
float: left;
background-color: blue;
}
#left div {
width: 50px;
display: inline-block;
}
#right{
float: right;
background-color: green;
display: block;
max-width: 200px;
}
</style>
.container {
display: flex;
justify-content: space-between;
}
It should do that.
Google up FlexBox Introduction for good explaination.
something like this ?
I've used display:flex to let the two divs line up nicely, floats only needed for the inner boxed
https://jsfiddle.net/070rk2e1/1/
I'm running into an issue with floats. I have two divs I need to always be side-by-side, on the same line. They should not wrap when the screen is resized down. One must be floated left, the other floated right. If the screen width is too small to display both divs entirely, then the user must be able to scroll the main window to see all content (scrollbars should be where the user expects them to be, not "inner" scroll bars). I only want scrollbars to be visible if both floated divs are not entirely visible -- the scrollbars should not be otherwise visible.
The problem is, even when I set the container to use white-space: none; or overflow: visible, the divs still wrap.
I need the divs to always stay inline with one another.
important NOTE: the contents of the two floated divs will be variable in width; I have hard-coded some sizes for demo sakes but those are NOT always the sizes they will be. the divs must be inline with one another regardless of their contents.
fiddle: http://jsbin.com/yidapiriya/edit?html,css,output
markup:
<div class="container clearfix">
<div class="content-container">
<!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
<div style="width: 400px; height: 400px;"></div>
</div>
<div class="ads-container">
<!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
<div style="width: 640px; height: 480px;"></div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
outline: 1px solid black;
}
.container {
white-space: nowrap;
width: auto;
max-width: 1600px;
margin: 0 auto;
height: auto;
padding: 1rem 3.5%;
overflow: hidden;
}
.content-container {
width: auto;
white-space: normal;
margin-top: 2.5rem;
float: left;
display: inline-block;
height: 25rem;
}
.ads-container {
width: auto;
display: inline-block;
float: right;
text-align: right;
}
.clearfix{
}
.clearfix:before {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
content: ' ';
display: table;
}
As per i understand your question you need two div be inline even if window is resize set min-width: to container
.container {
min-width: 1400px;
...
}
demo
UPDATE
New Demo
.container {
.....
min-width:380px;
}
.container > div{
display:inline-block;
position: relative;
width: 50%;
float: left;
}
Just remove the float: left and float: right from the .ads-container and .content-container and set overflow: auto; for .container
How do I make these 3 images fit to its parent div height while maintaining the image's aspect ratio?
<div id="myM">
<div class="ab">
<img src="http://img42.com/2lWNS+" class="cd"/>
<img src="http://img42.com/2lWNS+" class="cd"/>
<img src="http://img42.com/2lWNS+" class="cd"/>
</div>
</div>
css:
#myM{
width: 300px;
height: 200px;
background-color: cyan;
}
.ab{
width: 100%;
float: right;
}
.cd{
max-height:33%;
width:auto;
}
Here is a Fiddle
I think the problem is with the float removing the container from the flow. Instead, you can make the container an inline-block and use right-align.
https://jsfiddle.net/9uyww2j0/2/
Without changing your HTML, my new CSS is this:
#myM{
width: 300px;
height: 200px;
background-color: cyan;
text-align: right;
}
.ab {
display: inline-block; /* So text-align affects it */
height: 100%
}
.cd{
display: block; /* So takes full width */
height:33%;
}
I have a problem with some divs. In short here is what I need: 2 divs with a certain width (same width) - one with float left and one with right, and a third div that takes all the remaining space. The divs are using display : inline-block to have them on same line.
I have tried this :
<div class="wrapper">
<div class="control leftControl"></div>
<div class="display"></div>
<div class="control rightControl"></div>
</div>
And here is my css:
.wrapper {
width: 100%;
height: 100%;
min-width: 960px;
background-color: #E8E8E8;
}
.control {
width: 10%;
height: 100%;
display: inline-block;
background-color: #ADADAD;
}
.leftControl {
float: left;
}
.rightControl {
float: right;
}
.display {
width: 80%;
height: 100%;
display: inline-block;
}
The problem is that using % on some resolution causes the last div (controlRight) to be moved on a new line.I can understand why and found that if i use 79% on display the divs display almost correctly (1% left unsued.)
It is clear to me that this is not a correct solution.
Any help is appreciated.
You can put all your elements float:left and your 100% will always fit: fiddle
HTML
<div class="control"></div>
<div class="display"></div>
<div class="control"></div>
CSS
.control {
width: 10%;
height: 200px;
background-color: green;
float:left;
}
.display {
width: 80%;
height: 200px;
background-color:blue;
float:left;
}
Putting everything on float left will simply push divs one by one on the right.
I have 2 div in on page
<div id="main"></div>
<div id="panel"></div>
and using float to make main at left, and panel at right
#photos-main {
float: left;
width: 800px;
position: relative;
}
#panel {
float: left;
margin-left: 830px;
position: absolute;
}
I want to let panel fill with the left page space, which css should I use?
Just don't float it, and make it relatively positioned. Take out the margin as well. Floating "main" means that it will simply be to the left of "panel" all the time. If you define "main" how you want, "panel" will automatically take up the remaining space.
#photos-main {
float: left;
width: 800px;
position: relative;
}
#panel {
}
Looks like you're trying to build some layout, right? If that's the case, consider implementing (hence learning from) some of the techniques presented in these links:
40 Tutorials and tips about CSS Layouts
CSS Positioning
The perfect three columns layout
Hope it helps!
You could do it with floating with this approach:
#photos-main {
float: left;
width: 800px;
}
#panel {
float: right; /*to have the panel on the right side*/
width: 100px; /*with a width of 100px*/
}
Then you have to wrap the two Tags with another , which get a total width of both elements.
To clarify this two column layout and put e.g. a footer beneath, put another in your HTML-Structure and set into the css simple a "clear:both;", so the floating will be stopped.
Complete Sample
HTML
<div id="wrap">
<div id="photos-main"></div>
<div id="panel"></div>
<div id="clear"></div>
</div>
CSS
#wrap {
width: 900px;
}
#photos-main {
float: left;
width: 800px;
}
#panel {
float: right; /*to have the panel on the right side*/
width: 100px; /*with a width of 100px*/
}
#clear {
clear:both;
}