CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design
Fco
Fco

Reputation: 195

Div width 100% of the screen but still responsive behavior?

I'm trying to set a div the width of the screen but without using: 

div { 
  position: relative;
  left: 0;
  right: 0;
}

because this breaks the template.

It that possible?

Upvotes: 0

Views: 254

Answers (2)

Linus
Linus

Reputation: 444

As mentioned in the Bootstrap documentation, you have two different types of container classes to work with. One with a fixed width called "container" and one called "container-fluid" which is spanning the entire width of your viewport.

Link to the bootstrap documentation: http://getbootstrap.com/css/#overview-container

Code:

<div class="container-fluid">
  ...
</div>

Upvotes: 3

John
John

Reputation: 13739

You did not submit any code though I'll answer your question sans Twitter.

Even if the parent element is statically defined all the child elements will dynamically flow (within the parent's limitations) until you put static limitations on those child elements.

main {bottom: 0; left: 0; overflow: auto; position: absolute; right: 0; top: 0;}

All the elements in the main element in this example will still dynamically expand to use 100% of the width of the screen, regardless of what kind of screen.

Without using the position property if you don't set a width a block element like a div will automatically use 100% of the available width of it's parent unless it is set to float; adding margin or padding will subtract from the content width unless you specify a width (other than inherent or auto).

I'm going to presume that there is existing content on the page you're working with so unless you can edit the entire (X)HTML of the page then there is a chance you'll be forced to use the position property.

Upvotes: 2

Related Questions