On a JSP page, we have displayed a tree like structure using nested divs.Width of each div is calculated at run time. Only width of "div1" is given at runtime and other div's width is calculated using this at run time.Here, I have set it to 200px.
<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto">
<div id="div2" style="background-color:yellow;height:200px;width:190px;">
<div id="div3" style="background-color:blue;height:180px;width:180px;"></div>
<div id="div4" style="background-color:red;height:180px;width:50px;"></div>
</div>
</div>
Now the issue is "div4" is not getting appended in the right of "div3". It is getting placed in next line. Because of that tree structure is getting disturbed. And if I increase the width of "div2" then it is placed in the right but then horizontal scroll bar is coming for all cases where it is not required.
I have noticed the behavior of div that it place text vertically rather than horizontally.
Any idea how can I make it work?
Is this what you had in mind? I created a jsfiddle: http://jsfiddle.net/r6sPY/
Div4 will never get appended to the right of div3 as long as the width of div2 will be smaller than the sum of div3 and div4. But then again, I am not sure if this is what you had in mind.
<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto">
<div id="div2" style="background-color:yellow;height:200px;width:190px;">
<div id="div3" style="background-color:blue;height:180px;width:130px;float:left;"></div>
<div id="div4" style="background-color:red;height:180px;width:50px;float:left;"></div>
</div>
</div>
Related
On my webpage, I have a div element on the left with a static width of 300px. Right next to it, on the right, I want to display another element which has a dynamic, flexible width (because the browser window could be resized by the user) by using the Bootstrap grid with col-12. Imagine this:
<div class="row">
<div style="width:300px;"></div>
<div class="col-12"></div>
</div>
The div with class="col-12" should be right next to the left div, without space in between of them, and it should be growing/flexing always to the right of the window.
Unfortunately, it seems not to work, having a static px-width on the left element, and on the right an flex element with col-12. The second div is always BELOW the first div. Do you know a solution? Thanks in advance!
Try giving the second div in the row the class "col".
<div class="row">
<div style="width:300px;"></div>
<div class="col"></div>
</div>
Regards!
It seems I can't really solve this problem after two whole days of research and various tests.
I need a div which contains two div standing side by side as two columns, like in the image.
http://i.gyazo.com/bbfdcf09a2178fc0e662c59fae995988.png
The first div (in white) must assume the right size to contain properly the two columns.
I tried basically two ways:
1) make the two columns to float:left and add a clear:both empty div. The problem is, when one column become taller then the first, it wraps around it.
The code is:
<div style="position:relative; background-color:#fff">
<div style="float:left; width:50px;">
this is the first column
</div>
<div style="float:left; font-family:trebuchet MS, sans-serif;">
The second column..contains various divs.
<div> a header </div>
<div> some more contents </div>
<div> a footer </div>
</div>
<div style="clear:both;"></div></div>
2) make the two columns position:absolute and place them manually. It works, but I can't get the container to resize properly..
I don't know the context of this bit of code in relation to the rest of the code on your page, but can you make the outer div float? Because it contains two divs that do float but it itself does not, it collapses and its white background doesn't extend down to match the height of the divs within it. Having it float too means it does and you could also get rid of the <div style="clear: both;"></div> tag.
I've stripped out some of your code to leave just the crux of what I'm getting at:
<div style="float: left;">
<div style="float:left; width: 50px;">
this is the first column
</div>
<div style="float: left;">
The second column..contains various divs.
<div> a header </div>
<div> some more contents </div>
<div> a footer </div>
</div>
</div>
I have done a quick HTML page where I have used position:absolute to position all div's relative to the browser edges. When i re-size my browser things always stay on the left side.
What I now want to do is to create a new div and into it place all the other div's. I want this new div to always be centered even if user re-sizes browser with a width of 900px.
AND all the positioning i have done using absolute should now be with regards to the containing div.
What i have done so far is that i have tried the classic three column tutorials but the problem im having is that the position:absolut dont conform to containing div. Not sure how I will ask the question to make it clearer. Plz ask me questions and I will evolve the question until it makes sense.
Update:
Here is an example of the code I have right now. I want this to be centered in an fixed with div.
http://jsfiddle.net/favetelinguis/nf6mE/
<body>
<div class="div4">
<div class="div5">
---------------
</div>
<div class="div6">
-----------------
</div>
</div>
<div class="div7">
Foo<br>
Hoo<br>
Moo<br>
</div>
<div class="div1">
A horizontal imagge is placed here
</div>
<div class="div2">
Foo<br>
Hoo<br>
Moo<br>
</div>
<div class="div3">
Foo<br>
Hoo<br>
Moo<br>
</div>
</body>
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>
I am using bootstrap and want to have two columns, one left, one right. The only problem is, it is not at the same height, but it should. I could do that with margin negative, but that doesn't feel right. I also found the class='clearfix', but that does not work. What is the solution of this easy problem?
HTML
<div class="span6 pull-left">
left some content here
</div>
<div class="span6 pull-right">
right content here
</div>
In Bootstrap, pull = float.
The problem here is that the span divs are too wide. When you float left and right, you will see this behavior if the width of the divs is greater than the width of the container.
In Bootstrap, you don't actually need to do this. If the width of your grid is 12, you can simply do what you've done, with two 6-width spans (no pulling or floating required).
<div class="span6">
left some content here
</div>
<div class="span6">
right content here
</div>