I'm trying to do a layout with two top divs, and one below them. See here:
<div style="width: 49%; float: left; border: 1px solid">
<label>blabla</label>
</div>
<div style="width: 49%; float: left; border: 1px solid">
<label>blabla</label>
<br/>
<label>blabla</label>
</div>
<div style="width: 100%; float: left; border: 1px solid">
<label>blabla</label>
<label>blabla</label>
</div>
http://jsfiddle.net/DAYaM/
Problem is I would like the top left div (or right one) to resize to the same dimension as the other one, even if the number of elements are different. So basically to scale to the biggest one. Any suggestions?
Regards,
Bogdan
Here you go
I wrapped everything into a section, gave it a fixed width, and gave the first two div a width of 100%.
I also converted your inline styling to external, because inline is depreciated in HTML5.
Also, there is no need to use 49% for your width. If you add box-sizing:border-box, then everything will fit like you want it to.
Related
I have 2 div blocks that programmatically follow one after the other. by default they have is the width of 900px. In order to accommodate them to the width of the text, I put the
float: left;
or
display: inline-block;
div gets the width of the size of the text, but the lower div slides over the top lining up in a row.
PS I have a question-and-answer page, a question - one div, another answer.
http://i.imgur.com/cGb8cFg.png
just add this to html
<div style="display:block">
<div id="ques">Question</div>
<div id="answer">Answer</div>
</div>
and this is a css
#ques{ border:1px solid #000; height:80px;width:200px; margin-bottom:20px}
#answer{border:1px solid #000; height:80px; width:200px}
or see ur example here
JSFIDDLE
I have a wrapper with 4 divs inside it that are all floated to the left and are in one line. When I zoom out, the 4th div drops to the bottom. The only possible problem I can think of is the width of the wrapper decreasing, thus causing it to not be able to contain the 4th one, but the wrapper has a fixed width so I'm sure thats not the problem.
Here's the html:
<div id="wrapper">
<div id="panel">
<div id="panel1" class="panelcell"></div>
<div id="panel2" class="panelcell"></div>
<div id="panel3" class="panelcell"></div>
<div id="panel4" class="panelcell"></div>
<div class="spacer" style="clear: both;"></div>
</div>
</div>
and here's the css:
#wrapper{
width: 1280px;
}
#panel{
width:100%;
}
#panel .panelcell{
width: 318.75px;
height: 213px;
float: left;
border-right: 1px solid white;
}
.panelcell {
background-color: gray;
}
#panel1{
border-right: 1px solid white;
}
I think the root of the problem is how the browser renders your widths of "318.75px" as you zoom out (since, well, you can't render 0.75px to the screen). Depending on how it's rounded as the elements scale with your zooming out, the elements' widths could end up adding to larger than that of the parent element, resulting in the last floated element being pushed to a new line.
The way (that I could think of) to solve this is using percentage widths, rather than decimal pixel widths. Changing your definition of #panel .panelcell to this should give you what you're looking for:
#panel .panelcell{
width: 25%;
height: 213px;
float: left;
border-right: 1px solid white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The box-sizing: border-box ensures that the 1px border is also taken into account when determining the 25% width of the element. Here's an updated JSFiddle to show what this achieves. (The fourth element should not break to a new line as you zoom out.) If this isn't what you were looking for, let me know and I'll be happy to help further!
Did not test it, but I think your guess about the wrapper not being able to contain the <div>'s is correct: 4*(318,75px+2px) = 1283px > 1280 px.
Just increase the width of your wrapper and it should be fine.
It seems to be a problem with your border-right 1px solid which is increasing the width over 1280
<div>
<div id="div1" class="myimg">
</div>
<div id="div2" class="detail">
</div>
</div>
My html5 block is as above. I am using media queries for styling it for iphone,ipad,desktop.
I am new to responsive design. I want to implement style so that div1's image size don't get changed and div2's text contains should be shrinked as I reduce width of my browser window.
even if I am trying to give div2 %width and min-width it is comming down the div1. It is not staying beside div2. If someone can guide me how to write this. that will be a great help.
Yep, this can be accomplished pretty easily. Here is an example on JSFiddle.
HTML
<div id="div1" class="myimg"></div>
<div id="div2" class="detail"></div>
CSS
.detail {
overflow: hidden;
min-height: 50px;
border: 2px dashed black
}
.myimg {
float: right;
width: 250px;
min-height: 50px;
margin-left: 10px;
border: 2px dashed red
}
Is this what you were wanting to accomplish?
This one is really getting my goat. I need to float Container1 and Container 2 to the right and have them butt up against each other as they are now. I also need to float items inside Container2 to the right so they stack on each other. Problem is if I set anything inside Container2 (sample text 2, sample text 3) to float right it makes Container2 width 100% or something.
This could be solved by giving Container2 a specific width but that is not possible as all of this is dynamic content. I need Container2 to grow as i stack things inside it.
Is there any way around this? It is only a problem in ie7 all other browsers seem to be fine. This is driving me mad.
<div>
<div style="width: 100px; height: 100px; background: green; float: left;">
</div>
<div id="Container1" style="height: 100px; border: 1px solid #000000; float: right;">
sample text 1
</div>
<div id="Container2" style="height: 100px; border: 1px solid #000000; float: right;">
<div style="float: right; border: 1px solid #FF0000;">sample text 2</div>
<div style="float: right; border: 1px solid #00FF00;">sample text 3</div>
</div>
</div>
I couldn't find a fix to this bug in Internet Explorer 7.
There might be one, I don't know. I tried all the usual tricks.
Here's some reworked code utilising display: inline-block.
It looks identical to your old code in IE8, and is consistent in IE7/8 and other modern browsers. Yay!
See: http://jsfiddle.net/SUPhf/
There are a number of things to be aware of:
See these links to get a feel for display: inline-block:
Especially this: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
And also: http://www.brunildo.org/test/inline-block.html
I had to swap the order of elements in the source code to keep the visual display the same.
Whitespace in your HTML is significant when you're using display: inline-block.
Compare the fully fixed link above to this version, where the only change is extra whitespace:
http://jsfiddle.net/SUPhf/1/
Now that you're aware of those caveats, this should be fine.
I stuck with something like below. I need to make right-top div 100% height (its bgcolor will cover full height of main div).
<body>
<div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;">
<div id="left" style="float: left; width: 600px; background-color: #A7C864;">
<div id="left-top">left-top</div>
<div id="left-bottom">left-bottom</div>
</div>
<div id="right" style="float: right; width: 200px; background-color: #C7E48E;">
<div id="right-top">right-top</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
Working example here:
http://marioosh.net/lay1.html
Using table it is easy:
http://marioosh.net/lay2.html
I may be misunderstanding the question (your link to the table-based example isn't working), but it sounds like you're trying to create two columns with equal height. There are several techniques you can use, here are three of them:
You can give each DIV a large bottom padding, and an equally large, but negative, bottom margin.
#main {
overflow: hidden;
}
#left, #right {
float: left;
padding-bottom: 1000em;
margin-bottom: -1000em;
}
This solution is not without it's problems; if you attempt to link to an element in one of the columns (e.g. you have an element in one of the columns with id=foo and you link to mypage.html#foo) then the layout will break. It's also hard to add bottom borders using this technique.
Full example from Natalie Downe: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
You can give one of the columns a negative right margin, and the other a very wide left border.
#left, #right {
float: left;
}
#left {
background: red;
width: 200px;
margin-right: -200px;
}
#right {
border-left: 200px solid red;
}
More information on Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
You can fake it by giving #main a background image that includes the background for both columns. This technique is known as “Faux Columns” and is useful when you want complex backgrounds, or a decorative border between the columns.
More information on A List Apart: http://www.alistapart.com/articles/fauxcolumns/
As one commenter on the question noted, you can also use a table. However, unless you're displaying tabular data TABLE is not the appropriate HTML element.
You need to set heights of the parent elements to enable height of 100%. If you set both to height 100% you should get the effect you're looking for