I have a page where there are two images on top which are floated to left and right as below :
.floatLeft{ float:left;}
.floatRight{ float:right; }
<div>
<img src="firstImage" class="floatLeft"/>
<img src="secondImage" class="floatRight"/>
<!-- wright here -->
</div>
Issue is when i write anything after images (be it in div or a plain text ) and if it goes beyong page width ,
the text after maximum width shifts downwords entirely after images . That is text doesn't wrap inbetween two images
What i understand about float is text should "FLOW" in between two images (unless we use clear which "clears" area around images ) , but its not working like that.
I want to have a text in between two images.
Any help is higly appreciated as a I have done a lot of efforts but it is not working.
Logically, you have 3 blocks of data here, so I suggest using 3 floating divs with set width:
.floatLeft{ float:left}
.div1{width:X%}
.div2{width:Y%}
.div3{width:Z%}
.overflow{overflow: hidden} /* this is optional */
<div class="overflow">
<div class="floatLeft div1">
<img src="firstImage"/>
</div">
<div class="floatLeft div2">
<!-- text here -->
</div">
<div class="floatLeft div3"><!-- or make it float right if you want -->
<img src="secondImage"/>
</div">
</div>
If you want your images a fixed width, try using CSS calc:
.div1{width:100px}
.div2{width:-moz-calc(100%-300px);-webkit-calc(100%-300px);calc(100%-300px);} /* not supported in some browsers */
.div3{width:200px}
But honestly I recommend to go classic way and use a table here:
.table {width:100%;border-collapse:collapse}
.table td {padding:0;margin:0}
.block1 {width:X%} /* or width:Xpx */
.block3 {width:Z%} /* or width:Zpx */
/* do not touch block2 here */
<table class='table'>
<tr>
<td class='block1'>
<img src="firstImage"/>
</td>
<td class='block2'>
<!-- text here -->
</td>
<td class='block3'>
<img src="secondImage"/>
</td>
</tr>
</table>
Remember to wrap your content in "blocks", it always helps when you mark up.
I guess this is the answer that you need jsfiddle
I will explain a little about.
in your div add a class of imgcontainer
in your css, add the following
.imgcontainer{
position:relative;
}
you can add the width of the div, in jsfiddle I set it as 150px. and each of the image is 50px. there you add paragraph with some text
Try this way
<div>
<img src="firstImage" class="floatLeft"/>
<p class="floatLeft">Some textgoes here</p>
<img src="secondImage" class="floatRight"/>
</div>
but give proper width
Another variation is using a CSS version of the table approach proposed by igorpavlov. You have to replace the table/tr/td by divs and to adapt the CSS as proposed here :
.table {width:100%; display: table;}
div{ display: table-cell; vertical-align: top;}
.block1 {width:33%} /* or width:Xpx */
.block3 {width:33%} /* or width:Zpx */
img {width: 100%; height: auto;}
<div class='table'>
<div class='block1'>
<img src="firstImage"/>
</div>
<div class='block2'>
<!-- text here -->
</div>
<div class='block3'>
<img src="secondImage"/>
</div>
</div>
It provides better semantics and works IE8+!
i am using the "old" FB Likebox:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("394109690683544");</script>
<fb:fan height="120px;" width="100%" logobar="false" stream="false" connections="12" css="http://myurl.com/facebook.css" profile_id="562615520421911" class="fb_iframe_widget "></fb:fan>
</div>
</div>
</div>
how can i change the css to always have a 100% width? I need to use the box with twitter bootstrap and responisve.
thank you
It will not work, if you look at the code that's generated
<fb:fan height="120px;" width="200%" ...
translates into
<iframe id="f13ed26db2962a6" class="fb_ltr" scrolling="no" name="f2625075f1fd254" style="border: medium none; overflow: hidden; height: 120px; width: 200px;"
Which means that the widget reads only the values as the iframe is set to 200px not 200%
EDIT:
Seems like I was able to hack a bit with jQuery to make that happen, however becaue I can't set the span to 100% even when its display:block I'm using document width to set the span to the appropriate width, however you might need to change that to the width of the parent div. Again hacky but might get you started...
JSFiddle
I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.
Desired setup:
Currently:
My first idea was to create an div class, give it a background color, and give it 100% width.
.block {
width: 100%;
background: #fff;
}
However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.
The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
If you want to work with the full width of the screen, use .container-fluid:
Bootstrap 3:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
Bootstrap 2:
<body>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span8"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span12"></div>
</div>
</body>
QUICK ANSWER
Use multiple NOT NESTED .containers
Wrap those .containers you want to have a full-width background in a div
Add a CSS background to the wrapping div
Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , Container borders: https://jsfiddle.net/vLhc35k4/1/
HTML:
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }
FURTHER INFO
DON'T USE NESTED CONTAINERS
Many people will (wrongly) suggest, that you should use nested containers. Well, you should NOT.
They are not ment to be nested. (See to "Containers" section in the docs)
HOW IT WORKS
div is a block element, which by default spans to the full width of a document body - there is the full-width feature. It also has a height of it's content (if you don't specify otherwise).
The bootstrap containers are not required to be direct children of a body, they are just containers with some padding and possibly some screen-width-variable fixed widths.
If a basic grid .container has some fixed width it is also auto-centered horizontally.
So there is no difference whether you put it as a:
Direct child of a body
Direct child of a basic div that is a direct child of a body.
By "basic" div I mean div that does not have a CSS altering his border, padding, dimensions, position or content size. Really just a HTML element with display: block; CSS and possibly background.
But of course setting vertical-like CSS (height, padding-top, ...) should not break the bootstrap grid :-)
Bootstrap itself is using the same approach
...All over it's own website and in it's "JUMBOTRON" example:
http://getbootstrap.com/examples/jumbotron/
This is how you can achieve your desired setup with Bootstrap 3:
<div class="container-fluid">
<div class="row"> <!-- Give this div your desired background color -->
<div class="container">
<div class="row">
<div class="col-md-12">
... your content here ...
</div>
</div>
</div>
</div>
</div>
The container-fluid part makes sure that you can change the background over the full width. The container part makes sure that your content is still wrapped in a fixed width.
This approach works, but personally I don't like all the nesting. However, I haven't found a better solution so far.
There is a workaround using vw. Is useful when you can't create a new fluid container.
This, inside a classic 'container' div will be full size.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
After this there is the sidebar problem (thanks to #Typhlosaurus), solved with this js function, calling it on document load and resize:
function full_row_resize(){
var body_width = $('body').width();
$('.row-full').css('width', (body_width));
$('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
return false;
}
In bootstrap 4, you can use 'w-100' class (w as width, and 100 as 100%)
You can find documentation here:
https://getbootstrap.com/docs/4.0/utilities/sizing/
If you can't change the HTML layout:
.full-width {
width: 100vw;
margin-left: -50vw;
left: 50%;
}
<div class="container">
<div class="row">
<div class="col-xs-12">a</div>
<div class="col-xs-12">b</div>
<div class="col-xs-12 full-width">c</div>
<div class="col-xs-12">d</div>
</div>
</div>
Demo: http://www.bootply.com/tVkNyWJxA6
Sometimes it's not possible to close the content container.
The solution we are using is a bit different but prevent a overflow because of the
firefox scrollbar size!
.full-width {
margin-top: 15px;
margin-bottom: 15px;
position: relative;
width: calc(100vw - 10px);
margin-left: calc(-50vw + 5px);
left: 50%;
}
Here is a example: https://jsfiddle.net/RubbelDeKatz/wvt9253q
Instead of
style="width:100%"
try using
class="col-xs-12"
it will save you 1 character :)
Sorry, should have asked for your css as well. As is, basically what you need to look at is giving your container div the style .container { width: 100%; } in your css and then the enclosed divs will inherit this as long as you don't give them their own width. You were also missing a few closing tags, and the </center> closes a <center> without it ever being open, at least in this section of code. I wasn't sure if you wanted the image in the same div that contains your content or separate, so I created two examples. I changed the width of the img to 100px simply because jsfiddle offers a small viewing area. Let me know if it's not what you're looking for.
content and image separate: http://jsfiddle.net/QvqKS/2/
content and image in same div (img floated left): http://jsfiddle.net/QvqKS/3/
I would use two separate 'container' div as below:
<div class="container">
/* normal*/
</div>
<div class="container-fluid">
/*full width container*/
</div>
Bare in mind that container-fluid does not follow your breakpoints and it is a full width container.
I'd wonder why someone would try to "override" the container width, since its purpose is to keep its content with some padding, but I had a similar situation (that's why I wanted to share my solution, even though there're answers).
In my situation, I wanted to have all content (of all pages) rendered inside a container, so this was the piece of code from my _Layout.cshtml:
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
<div class="container">
#RenderBody()
</div>
</section>
</div>
In my Home Index page, I had a background header image I'd like to fill the whole screen width, so the solution was to make the Index.cshtml like this:
#section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
<div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}
<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
<div class="container">
<div class="row">
MORE CONTENT
</div>
</div>
</div>
I think this is better than trying to make workarounds, since sections are made with the purpose of allowing (or forcing) views to dynamically replace some content in the layout.
Though people have mentioned that you will need to use .container-fluid in this case but you will also have to remove the padding from bootstrap.
The following answer is not exactly optimal by any measure, but I needed something that maintains its position within the container whilst it stretches the inner div fully.
https://jsfiddle.net/fah5axm5/
$(function() {
$(window).on('load resize', ppaFullWidth);
function ppaFullWidth() {
var $elements = $('[data-ppa-full-width="true"]');
$.each( $elements, function( key, item ) {
var $el = $(this);
var $container = $el.closest('.container');
var margin = parseInt($container.css('margin-left'), 10);
var padding = parseInt($container.css('padding-left'), 10)
var offset = margin + padding;
$el.css({
position: "relative",
left: -offset,
"box-sizing": "border-box",
width: $(window).width(),
"padding-left": offset + "px",
"padding-right": offset + "px"
});
});
}
});
This must work (Mobile phone as well as Desktop screen):
class: alignfull and class: img-fluid will do the magic.
<div class="alignfull">
<img class="img-fluid" style="background-size: cover;
background-position: center ;
background-repeat: no-repeat;
height: auto;
min-width: 100%;
width: -moz-available; "
src="{{ $image->image }}" alt="An image">
</div>
I have a page with a couple of divs, sort of like this:
<div id="content">
<div id="topDIV" style="background-color: #0000C9; position:absolute; width:100%; top:0px; left:0px; height:44px;">
<table cellpadding="0" cellspacing="0" border="0" style="height:44px; width:100%;">
<tr><td>header div<td></tr>
</table>
</div>
<div id="mainTableDIV" style="background-color: #f00; padding: 10px; position:absolute; top:44px; left:0px;">
<table cellspacing=0 cellpadding=0 border=0 style="width:1400px;height:800px">
<tr><td><td></tr>
</table>
</div>
</div>
So second div (mainTableDIV) populates via AJAX request and width is set to approx 1400px depends on data.
so when i shrink browser less that this width i see horizontal scrollbar. when i scroll to the right first div (topDIV) which is a header div is not expanding to the same width as second div.
How can i make first header div to be always the same width as second width?
Wrap them in a div tag of their own
<div id='content'>
<div id="div_one" style="width:100%;">
<table width=100%...>
...
</table>
</div>
<div id="div_two" style="width:100%;>
<div id="data_div"></div>
</div>
</div>
First, you do not need width:100% when dealing with a div (as long as there is not a float). A div will AUTO FILL in the area that its placed in. So If content 2 exceeds the size of content 1, as long as the overall content container does not have a RESTRICTION on it, in terms of width, the content 1 will grow to meet content 2.
You've got some quotes in strange places, try fixing those and it should work. Besides that, it's a bit clearer if you instead use CSS to set the styles of these divs:
HTML:
<div id="div_one" class="divider"></div>
<div id="div_two" class="divider"></div>
CSS:
.class {
width: 100%;
}
Is this what you're looking for?
I am trying the Blueprint CSS framework, and am having a hard time figuring out how to do the overall layout.
It seems Blueprint (as far as I have understood it so far) makes you use a set page width at 950px. I guess you could change that with some modification, but in any case there has to be some width, so that's fine. The problem is, even if I want the main content of the page to be 950px wide, I want 100% wide headers and footers.
So I have placed a header and a footer outside the main "container" div that's 950px wide. I set the header div to 100%. And then I have a "headerContent" div inside it (containing menu, logo, etc), which has a 950px width (span-24 in Blueprint terms). But I want the headerContent div to be centered within the header div.
I have always used the "margin: 0 auto" trick to do this, but for some reason it doesn't work at all now.
Here's the html:
<div id="header" class="blueheader">
<div id="headerContent" class="span-24">
<div id="logo" class="span-6">
<a href="/">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14"><ul id="menu"><li>
<a href='/Services/Index'>TJÄNSTER</a></li>
<li>
<a href='/About/References'>KUNDER</a></li>
<li>
<a href='/About'>OM OSS</a></li>
<li>
<a href='/About/Contact'>KONTAKT</a></li>
</ul></div>
<div id="logindisplay" class="span-2">
Logga in
</div>
</div>
</div>
And here's the css for header and headercontent:
#headerContent
{
overflow: auto;
zoom: 1;
margin: 0 auto;
}
#header
{
width: 100%;
position: relative;
margin-bottom: 0px;
color: #000;
margin-bottom: 0px;
overflow: auto;
zoom: 1;
}
The overflow and zoom part is just another trick I read about to avoid having to use empty divs to clear containing divs, and I tried without them with no luck, so they have nothing to do with the problem.
Any ideas what I'm doing wrong?
You need to set a width the the #headerContent because without it defaults to width:100% if you place a 950px width to the div, you should be fine.
Found the answer: you shouldn't use span-24 on the headerContent apparently in the Blueprint framework, but rather the container class. Here's what worked:
<div id="header" class="blueheader">
<div id="headerContent" class="container">
<div id="logo" class="span-6">
<a href="#Url.Action("Index", "Home")">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14">#Html.Raw(Html.Menu())</div>
<div id="logindisplay" class="span-2">
#Html.Partial("_LogOnPartial")
</div>
</div>
</div>
I cannot say I understand exactly why it didn't work before, and that worries me, because I am trying this framework to simplify layout, but this made it harder to understand. As far as I could see it should have worked with the first code too...