Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have a requirement where a I need to display two divs side by side .This is the basic requirement where I need to build on
many functionalities going further.
I am able to achieve this in two approaches:
Approach 1:
<div id="id1" style="width:100%">
<div id="id2" style="width:100px;color:#0000FF;display:inline-block;border-color: red;border-style: solid;">
<p>This is some text in a div1 element.</p>
</div>
<div id="id3" style="width:100px;display:block;display:inline-block;border-color:blue;border-color: blue;border-style: solid;">
<p>This is some text in a div2 element.</p>
</div>
</div>
Approach 2:
<div id="id1" style="width:100%">
<div id="id2" style="width:100px;color:#0000FF;float:left;border-color: red;border-style: solid;">
<p>This is some text in a div1 element.</p>
</div>
<div id="id3" style="width:100px;display:block;float:left;border-color:blue;border-color: blue;border-style: solid;">
<p>This is some text in a div2 element.</p>
</div>
</div>
Which approach is the better one?
Is it float:left ? display:inline-block? My ultimate aim will be to make divs responsive as well in the future.Thats the reason wanted to know which one is better
Also, why is there space created between the divs when display:inline-block is used?
One advantage of using inline blocks is that you can center them horzontally using `text-align: center;' on the container element.
The space you write about is due to whitespace resulting from using line-breaks in the code.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 months ago.
Improve this question
Here for an example:
<div class="container">
<!-- First child element -->
<!-- Second child element -->
</div>
or:
<div class="container">
<!-- First child element -->
</div>
<div class="container">
<!-- Second child element -->
</div>
Now I want to know is it better to have only one parent .container or every element should have its own .container?
I am learning the bootstrap 5 and I wanna know what is a better approach to use container because in bootstrap you need a wrapping container.
Personally i would put a container around each of my main components on the site rather than the site as a whole. This would allow sections to breakout from the container if need be. for example:
<div class="container">
contained
</div>
<div class="container-fluid">
full width
</div>
<div class="container">
contained
</div>
This would not be easily achievable if all elements were wrapped in a single container.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 months ago.
Improve this question
Does the properties/style of div class A overlap B in the below case?
<div class="A">
<div class="B">
</div>
</div>
Your question is not clear enough but most of the times, properties can 'overlap' or are inherited.
For eg., if we add a text in the div with class 'B' and add a CSS styling for the text to the div with class 'A', you will be able to see that the styling for the text is changed. Although, if you provide styles to the second div also, it would be considered for the styling of the text.
Please provide further context so I can help better.
.A {
color: blue;
}
<div class="A">
<div class="B">
this is a text
</div>
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 months ago.
Improve this question
I am currently making a page with flexboxes, and when it comes to adding text areas, I wonder if I should make a new container for each text area or is it not the way to do ?
Let's say I have the following code for my page:
<div class="flex-container">
</div>
Should I do this :
<div class="flex-container">
<div class="containertextarea1">
<p> text area 1 </p>
</div>
<div class="containertextarea2">
<p> text area 2 </p>
</div>
<div class="containertextarea3">
<p> text area 3 </p>
</div>
</div>
Or something else?
Thank you
If you need columns in your flex-container you can use flexbox. I mean something like this. from your code I think you can use directly in flexbox. that will reduce DOM size.
Here is the CSSTrix Link for a better understanding of FlexBox
As we know flexbox is a one-dimensional layout model, then until and unless you don't want these text areas to be spread in two dimensions(like in both column and row) then I think putting all text areas in one container is fine.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have the following layout. I can't use navbar, so instead I used the Grid system and gave it background.
How can I make this layout responsive? How can I leave spaces between the divs inside my container (e.g. searchbox)? Are there any helper classes in the Bootstrap framework that allow me to achieve this?
You can add margin to the <div> tags inside a container or row, but Bootstrap was designed for responsive web apps. So unless you come up with a way of defining your margins not as literalls, but based upon the screen size, it won't be as reponsive as you might wish it to be. Also, please avoid altering the margin of something with the class container, row or col
My recommendation. On the div with col-lg-7 or whatever the number might be, include another row, so that you can organize the layout in whatever way you need. If you want to leave a certain space betweeen elements, use 'col-lg-offset-x' according to your needs; with 'x' being the amount of spaces you want between elements. This will too sum up to 12.
Let me give you an example
<div class="row">
<div class="col-lg-2">
<!--Whatever you want to include here-->
</div>
<div class="col-lg-3">
<!--Whatever you want to include here-->
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-lg-offset-2 col-lg-4">
<!--Whatever you want to include here-->
</div>
<div class="col-lg-offset-1 col-lg-5">
<!--Whatever you want to include here-->
</div>
</div>
</div>
</div>
You will need to add the col-md-x, col-sm-x and col-xs-x classes to fit your needs.
I hope it helps.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I apologise in advance if this is a really obvious and noobish question, but how do i segment a web page into multiple portions, with each portion of the webpage filling the screen in it's entirety?
A good example of what i wish to do would be similar to treehouse's homepage when i segment the webpage into multiple portions e.g "home","about us", etc.. I've tried right clicking on the webpage and having a look through the css but did not see height and/or width applied to anything on the page.
How exactly does treehouse, and others segment their webpages?Do they simply make use of a background image or is there some other method of doing so?
When you give the html, body elements a the css property's:
html, body {
height: 100%;
width: 100%;
}
And in your html you makke a couple of div's like this:
<div class="fitScreen">
content 1
</div>
<div class="fitScreen" style="background-color: red">
content 2
</div>
<div class="fitScreen" style="background-color: blue">
content 3
</div>
<div class="fitScreen" style="background-color: yellow">
content 4
</div>
And you give them a css property of height: 100%; They fill the whole screen.
Demo here
EDIT:
Or if you just want 1 element that fills the screen, and all that is beneath that element has a height of auto, just just give make one div with the class of fitScreen.
And beneath that another element with your own content.