1

Basically what I want to do, is exactly the same as this question: Is there are way to make a child DIV's width wider than the parent DIV using CSS?

The only issue is that the Drupal theme I'm using is based off of bootstrap which makes the parent element (col-sm-12) have a position: relative;.

I could do the whole :

#my_div_id {
    position: absolute;
    left: 0;
    width: 100%;
}

And remove the position: relative; from the Bootstrap css definitions of all of the col-sm-* classes, but would that cause any adverse issues?

Community
  • 1
  • 1
Darren
  • 13,050
  • 4
  • 41
  • 79
  • 1
    You can split it into parts say `.container` wrapper for header, custom wrapper for banner and `.container` wrapper for the rest of the content. – anpsmn Feb 20 '15 at 05:08
  • I thought about that @anpsmn and I would've done that by simply creating a region and all for the theme in Drupal, but I'd like to achieve this via the CSS path. – Darren Feb 20 '15 at 05:09
  • 1
    I guess removing the `position:relative` of all col-* classes would be a bad idea. I feel its better to have a custom section so that you can style it accordingly. – anpsmn Feb 20 '15 at 05:16
  • I agree with @anpsmn. Changing the the default css of the `col-sm_*` classes is a bad idea. Just split the html to different container sections and customize only the one you need to change. – Sebsemillia Feb 20 '15 at 10:14

1 Answers1

3

In short, the answer is yes. See this bootply

Without knowing your specific requirements, I simply allowed a row to extend beyond the container width with this CSS:

.row.expanded{
    width:120%; 
    margin-left:-10%;
}

That makes it wider than the parent, and keeps it centered.

codefreak
  • 6,950
  • 3
  • 42
  • 51
Ted
  • 14,757
  • 2
  • 41
  • 58
  • I'll accept this answer, as it does as intended. I did however go with the separate container options, I just wanted to see if there was an alternative. Thanks. – Darren Feb 23 '15 at 00:10
  • how did you find 10% ? – Hamid Shoja Apr 08 '21 at 16:53
  • @HamidShoja 10% is half of the 20% that I enlarged it--that keeps it centered – Ted Apr 08 '21 at 18:31
  • seems in this example you know that, I mean if you has a container , for instance bootstrap container, you want to enlarge it full width. how you can find the margins of container ? – Hamid Shoja Apr 08 '21 at 18:35