Now I want the text "(även uppfinnare)" to display at the top row. The HTML that does it now is
<div class="data-box">
<div class="personName"><strong>
3. Kee Marcello
</strong></div>
<div class="otherDetails">(även uppfinnare)</div>
<table border="0"><tr><td></td><td>Telefon</td><td>123</td></tr>
<tr><td></td><td>Fax</td><td>123</td></tr>
<tr><td></td><td>E-post</td><td>123</td></tr>
<tr><td>null</td><td>Referens</td><td></td></tr>
</table>
</div>
The relevant CSS is
.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
.personName { float:left; width:300px; }
.otherDetails { float:right; width:450px; }
Can you help me? Thanks
apply float left both to .personName and .otherDetails and make sure that .data-box width is almost 750px (300px + 450px) or just reduce the size of the 2 side-by-side div so the sum of their width is no wider than 650px
It falls down because it doesn't fit on the container. .data-box is 650px width, and .personName and .otherDetails width sums up to 750px
Both your elements are floated (one to the right, one to the left), and together they make up 750px. but the container element is only 650px wide.
when floated elements run out of space, they get shuffled to the next line.
either make the children elements smaller (to fit into 650px) or make the parent bigger(750px)
Related
I have a 960px wide wrap, and then a 930px wide main-content wrap with 15px left/right margins. within the main-content wrap there are three divs floated left that are each 280px wide, with 15px margin-right to fill the main-content. To avoid giving the div to the right a margin and make it not fit I gave it another class and set its margin-right to 0.
I am trying to make the site responsive and these are my percentage calculations:
wrap=100%
main-content=96.875%
main-content margins=1.5625%
divs=30.10752688%
div margins=1.61290323
CSS:
#page-wrap {
width:960px;
margin: 0 auto;
background: white;
}
#main-content {
width:96.875%;
margin:15px 1.5625% 0 1.5625%;
}
.box { (the divs)
float:left;
width:30.10752688%;
min-height:160px;
margin:30px 1.61290323% 0 0;
}
.right{ (only the div to the right)
margin-right:0;
}
HTML
<div id="page-wrap">
<div id="main-content">
<div class="box">
content
</div>
<div class="box">
content
</div>
<div class="box right">
content
</div>
</div>
</div>
I don't know why the divs dont seem to resize correctly. Any help would be much appreciated!
The site can be viewed here for now: http://hl.kylmark.se
The problem I see is that there's a fixed 10px padding around all of the blue boxes. Since the padding is added on to an element's width, it throws off your percentage math.
Solution 1
You could just change the side padding on those boxes to a percent value like everything else:
.blue {
...
padding: 10px 1.0752688%;
}
With that approach you'd be collapsing the borders as you get smaller, which may not be desirable.
Solution 2
Maybe a better approach is to change the box-sizing property to calculate width from border to border rather than from content edge to content edge. That way you can have a 10px padding inside a flexible container whose width is figured correctly:
.box {
...
width: 32.258065%;
box-sizing: border-box;
}
One more thing
You may also want to watch out for is sub-pixel rounding. When your percentages calculate to something other than a whole pixel, the browser has to decide how to round it. If too many things are rounded up, the widths will get too big and cause content jumps like that in some browsers. You'll want to double-check that in your supported browsers. You can read a good explanation here.
I am building this module in html and css I would like to avoid the use of JavaScript.
To help explain what I'm trying to create I've attached a picture.
Box A - #left will have a picture inside.
Box B - #right will have text inside.
Neither Box A or B can overlap each other.
So far -
I have managed to build the module relying on (%) and have got it to rescale smaller or larger depending on the width of browser. But it's not quite working how I intend it to yet.
The problem I'm facing -
When the module is scaled down to its smallest with the help of (min-width) Box B's width scales down with it. This is not what I intend to happen, Box B needs to stay a fixed (px) width while Box A rescales by a (%) width.
To overcome this problem I tried giving Box B (px) width instead of (%). This made matters worse - now when the browser is scaled down to its smallest Box B leaves the viewport & the scrollbars (x axis) takeover. Box B needs to be within the viewport even at the smallest scale.
Any ideas of how to get this working? Thanks.
Html -
<div id="outer">
<div id="left">Box A</div>
<div id="right">Box B</div>
</div>
Css -
#outer {
background-color:#830000;
margin:0px 0px 0px 0px;
max-width:815px;
min-width:518px;
position:relative;
width:100%;
z-index:1;
}
/*Box A*/
#left {
background-color:#b1b1b1;
float:left;
padding-bottom:57%;
position:absolute;
width:72%;
height:10px; /* extra 10px helps show overlap of #left onto #right*/
z-index:2;
}
/*Box B*/
/*Switch between #right(px) and #right2(%) for the two outcomes I'm getting*/
#right { /* using px - Good - the width is fixed, But - should not overlap #left */
width:229px;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
#right2 { /*using % - Good - no overlapping, But - the width of 229px decreases*/
width:28%;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
"px" and "%" is a bad idea.
Use media query and gives a fixed size for your 2 columns.
HTML
<div id="main">
<div class="left" id="c1">l</div>
<div class="left" id="c2">l</div>
<div class="clear"></div>
</div>
CSS
*{margin:0;padding:0}
.clear{clear:both;}
.left{float:left;height:300px;}
#main{width:100%;min-width:518px;}
#c1{background:red;width:72%;}
#c2{background:green;width:28%;}
#media screen and (max-width: 518px) {
#c1{width:290px;}
#c2{width:228px;}
}
I'm not sure that answers your question...
http://codepen.io/ColoO/pen/njLyD
I need to have two inline divs, the left div should be fluid and the right should be fixed. The minimum width for the left fluid column should be 801px and the maximum width for the left div should be 1250px. The right fixed div width should always be an exact 250px.
Can someone please show me how to do this? If the body width is 1500px for example, the left fluid div should grow and push the right div out to 1250px and stop. If the body content is 801px then the left div should be around 550px.
I've already asked this question but wasn't able to get anything that worked.
.intro {
float:left;
height:200px;
width:100%;
padding:10px 0;
}
.intro-right,
.intro-left{
display:inline;
}
.intro-right {
float:left;
width:250px;
margin-right:20px;
height:200px;
}
.intro-left {
min-width:801px;
max-width:1250px;
height:200px;
}
<div class="intro">
<div class="intro-left">
<h2>Test</h2>
<p>Test</p>
</div>
<div class="intro-right">right fixed</div>
</div>
try with javascript in a way that will look not too bad on page load
for example you hide right-intro, with left set to 100%,
on load calculate the size for left make appear right from the right while decreasing left + a fallback if no javascript with fixed width for both
NB: add a window resize event listener
I am trying to add two divs inside the parent div, which has a button inside each div.
I need to fix the width in pixels only for the second div and the 1st div should be having width in % so that the button inside the 1st div should be covering the entire space of the browser.
I need all the widths in % and also I don't want to change either html structure and css because it is already implemented so i just need changes in css property.
Here is my demo
http://jsfiddle.net/zuyyT/2/
P.S : When I scale the browser, the second div is coming in next line. Please scale it and check once.
Fiddle is working on and off ... you can go either one of two ways; using floats (need to change the order of your markup) or positioning - like such ...
<div class="block">
<div class="block_right"> <span>last button</span> </div>
<div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>
and your CSS ...
.block {
display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
background-color:#C93; margin-right: 150px;
}
.block_left a{
background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
float:right; width:130px; background-color:#CC9
}
... using position, you'll need to add position:relative to .block and then right:0 to .block_right; keep the margin on .block_left
Using positioning, you won't need to change the order of the elements in your markup (should that be an issue).
This may be what you require. :-)
.block_right{
position :absolute;
right:0;
top:0;
float:right; width:130px; background-color:#CC9
}
If you give your block_left a width:100% and then use margin-right:-130px; you can leave your html exactly as it is.
The negative right margin leaves space on the right hand side for other elements to fit into even though the element has a 100% width.
This is happening because of the width of right div..u gave 100% to the parent and 80% to the first child..so,when the browser size is 500px(say),the first child will occupy 400px(80%) of it...And when u give 130 px to the second child,it'll come to the next line..that's pretty obvious coz it doesn't have enough space in the first line...so it should be <=100px(for this example)...
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}